vue 简单实现点击列表改变颜色

注意事项：1 v-for 的 index 是可以写在标签属性里面的，但是不能加 {{ }} 。2 标签的 class 用 v-bind对象语法来绑定，当 index == isAcitive 时，则改变颜色。用这种方式可以不需要再像原生 js 那样，根据排他思想先遍历一遍全部元素，把所有元素的颜色样式去掉，然后再给当前元素添加颜色样式。3通过把 index 传给 click 方法，可以在vue对

Bigfishseasugar

6493人浏览 · 2020-06-15 21:41:09

Bigfishseasugar · 2020-06-15 21:41:09 发布

注意事项：

1 v-for 的 index 是可以写在标签属性里面的，但是不能加 {{ }} 。

2 标签的 class 用 v-bind对象语法 来绑定，当 index == isAcitive 时，则改变颜色。用这种方式可以不需要再像原生 js 那样，根据排他思想先遍历一遍全部元素，把所有元素的颜色样式去掉，然后再给当前元素添加颜色样式。

3 通过把 index 传给 click 方法，可以在vue对象的函数中动态改变 isAcitve。

4 v-cloak 可省略

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click="btnClick(index)" :class="{active:index==isActive}" v-for="(item,index) in arr" v-cloak>{{index+1}}
            -
            {{item}}
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                arr: ['海王', '海尔兄弟', '黑猫警长', '海贼王'],
                isActive: 0
            },
            methods: {
                btnClick: function (index) {
                    this.isActive = index;
                }
            }
        })
    </script>
</body>

</html>

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}$/, //不连续的两位字母// /^