Vue 循环为选中的li列表添加效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 循环为选中的li列表添加效果</title>
</head>
<style>
    li{
        list-style: none;
    }
    .active {
        background: rgba(135, 135, 135, 0.74);
        width: 20%;
        color: #eee;
    }
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">
    <ul>
    <li v-for='(data,key,index) in data' @click="addClassFun(index)"
       v-bind:class='{active:index==classID}'>
        {{data.data}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            data: {
                data1: {
                    data: "测试1",
                    ifAdd: 0
                },
                data2: {
                    data: "测试2",
                    ifAdd: 1
                },
                data3: {
                    data: "测试3",
                    ifAdd: 2
                }
            },
            classID: "0"
        },

       mounted(){
            $("ul li:first-child").addClass('active');//第一个默认选中
      },


        methods: {
            addClassFun: function (index) {
                this.classID = index;

           $("ul li:first-child").removeClass('active'); 切换的时候第一个不要选中


            }
        }
    })
</script>
</body>
</html>

posted on 2019-07-18 14:41 小虾米吖~ 阅读(873) 评论(0) 编辑收藏举报