Vue官方文档上有和的例子。
受此启发，写了这个小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绑定。

Vue.js小Demo--单选和复选成果实现