vue-点击添加class 其他标签删除class

body>div id="app">p v-for="(item,$index) in arr" @click="toggle($index)" :class="{active:$index==active}">{{item}}p>div>script>var app=new Vue({

冥界摄政王

10230人浏览 · 2018-01-03 09:52:58

冥界摄政王 · 2018-01-03 09:52:58 发布

<body>

    <div id="app">
        <p v-for="(item,$index) in arr" @click="toggle($index)" :class="{active:$index==active}">{{item}}</p>
    </div>
    <!-- Add your site or application content here -->




    <script>
        var app=new Vue({
            el:'#app',
            data:{
               active:0,
                arr:[
                    "新闻",
                    "视频",
                    "社会",
                    "军事",
                    "军事1",
                    "军事2",
                    "军事3",
                    "军事4",
                ]

            },
            computed:{

            },
            methods:{
                toggle(index){
                    this.active=index
                }
            },
        })



    </script>
</body>

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