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绑定。
原文地址:https://www.cnblogs.com/JasperHua/p/12091967.html
时间: 2024-10-01 07:33:24