vue 点击切换动态Class变化,实现当前样式改变

一、先在data里增加一个变量，用来储存当前点击的元素return {leftColorDisplay: 0, // 0为默认选择第一个，-1为不选择};二、在template里面的代码，切记在@click方法里面要传index，三、点击事件：改变data里面leftIndex的值四、在style中写上 .leftColorChang样式五、...

webYin

21840人浏览 · 2019-07-01 10:24:22

webYin · 2019-07-01 10:24:22 发布

一、先在data里增加一个变量，用来储存当前点击的元素

return {

leftColorDisplay: 0, // 0为默认选择第一个，-1为不选择

};

二、在template里面的代码，切记在@click方法里面要传index，

三、点击事件：改变data里面leftIndex的值

四、在style中写上 .leftColorChang样式

五、效果图

如果你的需求和我一样请加以上俩个标签你也可以试下加与不加的效果区别。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^