美文网首页
vue绑定class的方法

vue绑定class的方法

作者: linda的小天地 | 来源:发表于2020-10-14 13:25 被阅读0次

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>

相关文章

网友评论

      本文标题:vue绑定class的方法

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