vue-如何动态切换class

2018-11-13  本文已影响0人  梅格Drum

基础语法


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

上一篇下一篇

猜你喜欢

热点阅读