使用VUE动态追加多选和单选,选中样式

时间:2024-04-04 18:22:57

实用场景

多选多个”车系“,并为每个选中的span添加样式
使用VUE动态追加多选和单选,选中样式

思路:

元素上,动态绑定类名active,为item添加布尔类型的属性active,绑定点击事件,传递参数item,在事件函数中判断是否item是否存在active属性,存在的话,设置属性值为false,不存在的话,设置为true,就可以达到选中添加样式

html部分
使用VUE动态追加多选和单选,选中样式
js部分
使用VUE动态追加多选和单选,选中样式
如果为单选,需要清除其他元素样式,那么请保留Vue.set(elem,‘active’,false);

备注: 为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法