美文网首页
vue-如何动态切换class

vue-如何动态切换class

作者: 梅格Drum | 来源:发表于2018-11-13 13:15 被阅读0次

    基础语法


    vue讲的很详细在此不再叙述


        <div id="app1">
            <ul>
                <li v-for="(item, index) in items" :class="{'active': isActive == index}" @click="handleActive(index)">{{ item }}</li>
            </ul>
        </div>
        <script>
            var app1 = new Vue({
                el: "#app1",
                data: {
                    items: ['q','w'],
                    isActive: 0
                },
                methods: {
                    handleActive: function(index) {
                        this.isActive = index;
                    }
                }
            });
        </script>
    

    着重理解v-bind:class是接受了一个对象,'active'是类名,第二个参数可以是一个表达式或者一个数据属性为boolean类型的值,如果为true则绑定class

    相关文章

      网友评论

          本文标题:vue-如何动态切换class

          本文链接:https://www.haomeiwen.com/subject/dxgkfqtx.html