在Vue中class与style样式绑定

在Vue中class与style样式绑定

1.class绑定

写法：:class:xxx    //xxx可以是字符串、对象、数组

1).字符串绑定

适用于：样式的类名不确定，需要动态绑定
实例如下：

html代码如下：

    <div class="basic" :class="moodClass" @click="changeMood">{{name}} </div>

js代码如下：

 new Vue({
            el:"#root",
            data:{
                name:'你好，小鲨鱼',
                moodClass:'happy',
               
            },

            methods: {
                changeMood(){
                    const arr=['happy','sad','normal']
                    this.moodClass=arr[Math.floor(Math.random()*3)]
                }
            },
        })

2).数组绑定

适用于：要绑定的样式类名和个数都不确定的情况下

写法 :

<div class="basic" :class="classArr">{{name}} </div>

 data:{
                name:'你好，小鲨鱼',
                classArr:['radius','font','border','happy'],

3).对象绑定

适用于：要绑定的样式类名和个数都确定，到要动态决定用不用的情况下

写法 :

<div class="basic" :class="classObj">{{name}} </div>

 data:{
                name:'你好，小鲨鱼',
                classObj:{
                    'radius':false, //值为false不调用类名
                    'font':true
                }

2.style样式绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中 activeColor/fontSize 是 data 属性

实例：

 <div class="basic" :style="styleObj">{{name}} </div>

styleObj:{
       fontSize:'50px',
                }