【VUE】绑定样式

绑定class样式

• 字符串写法
  • 适用于：样式的类名不确定，需要动态指定

<div class="basic" :class="mood" @click="changeMood" > {{name}} </div>
...
const vm = new Vue({
        ...
         data:{
                name:'XXX',
                mood:'normal'
        },
        ...
})

• 数组写法
  • 适用于：要绑定的样式个数不确定、名字也不确定

<div class="basic" :class="classArr"> {{name}} </div>
<!-- v-bind: 绑定的一定是表达式 下面'xxx'是字符串值-->
<div class="basic" :class="['yangshi1','yangshi2','yangshi3']"> {{name}} </div>
<!-- 此处a,b,c是表达式，会去data中找属性 -->
<div class="basic" :class="[a,b,c]"> {{name}} </div>
...
const vm = new Vue({
        ...
         data:{
                name:'XXX',
                mood:'normal',
                // classArr:['yangshi1','yangshi2','yangshi3']
                a:'yangshi1', //定义好的css样式中存在的样式名
                b:'yangshi2',
                c:'yangshi3'
        },
        ...
})

• 对象写法
  • 要绑定的样式个数确定、名字也确定，但要动态决定用不用

<div class="basic" :class="classObj"> {{name}} </div>
<div class="basic" :class="{yangshi1:a,yangshi2:false}"> {{name}} </div>
...
const vm = new Vue({
        ...
         data:{
                name:'XXX',
                mood:'normal',
                // classArr:['yangshi1','yangshi2','yangshi3'],
                classObj:{
                    yangshi1:false,
                    yangshi2:false,
                },
                a:true, //一般不这么写
        },
        ...
})

绑定style样式

<!-- 不变化的样式正常写 变化的通过data绑定 -->
<div class="basic" style='font-size: 40px;'> {{name}} </div>
<div class="basic" :style='{font-size: fsize + 'px'}'> {{name}} </div>
<!-- 对象写法 -->
<div class="basic" :style="styleObj"> {{name}} </div>
<div class="basic" :style="[styleObj,styleObj2]"> {{name}} </div>
<!-- 数组写法 -->
<div class="basic" :style="styleArr"> {{name}} </div>
...
const vm = new Vue({
        ...
        const x = {fontSize: fsize + 'px'}
         data:{
                name:'XXX',
                mood:'normal',
                fsize:40
                styleObj:{
                    fontSize: '40px', //对应font-size
                    color:'red',
                },
                styleObj2:{
                    backgroundColor:'orange'
                },
                styleArr:[
                    {
                        fontSize: '40px', //对应font-size
                        color:'blue',
                    },
                    {
                        backgroundColor:'orange'
                    }
                ]
        },
        ...
})

总结

• class样式
  • 写法：class='xxx' xxx可以是字符串、对象、数组
    • 字符串写法适用于：类名不确定，要动态获取
    • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
    • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
• style样式
  • :style:"{fontSize: xxx}"其中xxx是动态值
  • :style="[a,b]"其中a、b是样式对象