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

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

演示图：

demo.vue文件代码：

/* 一些简单的样式 */
.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);
}

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

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