vue绑定class的方法

2020-10-14  本文已影响0人  linda的小天地

1. :class="['class1','class2','class3']"放到数组中并且加引号

<p :class="['size', 'color', 'active']">我是段落</p>

2. 编写一个三目运算符来实现按需绑定

    格式: 条件表达式 ? '需要绑定的类名' : ''

    <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>

3. 通过对象来决定是否需要绑定

    格式: {'需要绑定的类名' : 是否绑定}

    <p :class="['size', 'color',{'active' : false}]">我是段落</p>

4. 使用Model中的对象来替换数组

    <p :class="obj">我是段落</p>

<script>

    // 这里就是MVVM中的View Model

    let vue = new Vue({

        el: '#app',

        data: {

            obj:{

                'size': false,

                'color': false,

                'active': true,

            }

        }

    });

</script>

上一篇 下一篇

猜你喜欢

热点阅读