vue绑定class的方法

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。