Vue实现多选、单选的样式切换
2020/3/25 14:01:37
本文主要是介绍Vue实现多选、单选的样式切换,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
vue框架中多选和单选的实现。
css选中样式
.active{ color:red }
多选
<li class="select" v-for="(item,index) in array" :class="{active:item.active}" @click="ClickActive(item,index)" >{{item.name}} </li>
data() { return { array: [ {name: '选项一'}, {name: '选项二'}, {name: '选项三'} ], } }, methods:{ ClickActive(item,index){ if(item.active){ Vue.set(item,'active',false) //为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法 }else{ Vue.set(item,'active',true) } } } //Vue.set(object, key, value) //object:要更改的数据源(可以是对象或者数组) //key:要更改的具体数据 //value:重新赋的值
单选
<li class="select" v-for="(item,index) in array" :class="{active:index == isA }" @click="ClickActive(index)" >{{item.name}} </li>
data() { return { array: [ {name: '选项一'}, {name: '选项二'}, {name: '选项三'} ], isA:0 //初始化第一个高亮 } }, methods:{ ClickActive(index){ this.isA = index } }
这篇关于Vue实现多选、单选的样式切换的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程