Vue项目开发 element-UI 前端实现 1到10排列选择的按钮

在 Element UI 中，你可以通过 el-button 来实现按钮的排列选择，例如让用户选择 1 到 10 之间的数字。为了实现这一功能，我们可以使用 v-for 来动态生成 1 到 10 的按钮，并通过按钮点击事件来更新所选的数字。

以下是一个基本的实现方式：

1. 安装 Element UI

如果你还没有安装 Element UI，可以通过以下命令来安装它：

npm install element-ui --save

2. 在 Vue 组件中使用 Element UI

示例代码：

<template>
  <div>
    <el-row>
      <!-- 使用 v-for 循环生成 1 到 10 的按钮 -->
      <el-button 
        v-for="number in numbers" 
        :key="number" 
        :type="selectedNumber === number ? 'primary' : 'default'" 
        @click="selectNumber(number)"
      >
        {{ number }}
      </el-button>
    </el-row>
    
    <div v-if="selectedNumber !== null" class="selected-number">
      <p>你选择了数字: {{ selectedNumber }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 数字数组 1 到 10
      selectedNumber: null // 当前选中的数字
    };
  },
  methods: {
    selectNumber(number) {
      this.selectedNumber = number; // 设置选中的数字
    }
  }
};
</script>

<style scoped>
.selected-number {
  margin-top: 20px;
  font-size: 16px;
  color: #409EFF;
}
</style>

说明：

• v-for="number in numbers"：通过 v-for 循环动态生成按钮。numbers 数组包含了数字 1 到 10。
• :type="selectedNumber === number ? 'primary' : 'default'"：根据 selectedNumber 是否等于当前按钮的数字来改变按钮的样式。如果该数字被选中，按钮样式将变为 primary，否则为 default。
• @click="selectNumber(number)"：点击按钮时触发 selectNumber 方法，更新 selectedNumber。
• <div v-if="selectedNumber !== null">：在用户选择一个数字后，显示选中的数字。

样式说明：

• selected-number 类样式用于显示选中的数字，并给予它一些基本的格式设置。

3. 使用效果：

• 页面将显示一行按钮，每个按钮代表一个数字（1 到 10）。点击按钮后，按钮的样式会变为 primary，并且页面下方会显示你选择的数字。

这样，用户可以通过点击这些按钮来选择 1 到 10 之间的数字，而选中的按钮将变成高亮显示。

补充：可以在 el-button 上使用其他样式或图标进行自定义，以适应不同的设计需求。

原文地址：https://blog.csdn.net/huang3513/article/details/143920571

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！