Vue.js小Demo--单选和复选功能实现

Posted 2021-03-20 jasperhua

Vue官方文档上有单选按钮radio和复选按钮checkbox的例子。
受此启发，写了这个小demo。

演示图：

demo.vue文件代码：

  <div>
    <div class="Select">
      <p class="Title">Single choice</p>
      <span
        class="Box"
        :class="{Selected_active:index == One}"//条件为真时,：class多了个选中样式属性，即为选中状态.
        v-for="(item,index) in List"
        :key="index"
        @click="SelectedOne(index)"
      >{{item.message}}</span>
    </div>
    <div class="Select">
      <p class="Title">Multiple choice</p>
      <span
        class="Box"
        :class="{Selected_active:index == Selected[index]}"
        v-for="(item,index) in List"
        :key="index"
        @click="SelectedTwo(index)"
      >{{item.message}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      One: 3,
      List: [{ message: "1st" }, { message: "2nd" }, { message: "3rd" }],
      Selected: [10, 10, 10, 10, 10]//初始复选按钮均为未选情况(此demo下v-for的index不可能等于10)
    };
  },
  methods: {
    SelectedOne(index) {
      this.One = index;
    },
    SelectedTwo(index) {
      this.Selected[index] == index
        ? this.Selected.splice(index, 1, 10)//替换数组第index项为10（在此demo下的情况为未选中）
        : this.Selected.splice(index, 1, index);//替换数组第index项为index（在此demo下的情况为选中）
    }
  }
};
</script>
<style?scoped>
/* 一些简单的样式 */
.Select {
  height: 82px;
  width: 359px;
  margin-left: 6px;
}
.Title {
  height: 17px;
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}
.Box {
  width: 88px;
  height: 35px;
  display: inline-block;
  margin-left: 10px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  font-family: "PingFang SC";
  color: rgba(102, 102, 102, 1);
  background: rgba(248, 248, 248, 1);
}
.Selected_active {
  background: rgba(224, 248, 249, 1);
  color: rgba(28, 178, 188, 1);
}
</style>

Splice函数的简单说明：splice(index,len,[item])
1、可以用来添加/删除/替换数组内某一个或者几个值
2、该方法会改变原始数组
index:数组开始下标
len: 替换/删除的长度
item:替换的值，删除操作的话 item为空

个人小小总结：功能挺简单的一个demo，算是加深自己对v-for的理解，以及v-for遍历下的:class绑定。