5.vue2-样式Class 与 Style 绑定

Author:vanessa

Date:2018/02/11

---样式内容---

<style>
        .title{font-size: 40px;}
        .active{color:red}
        .txt{text-decoration: line-through}
        .bg{background: yellowgreen}
    </style>
           

1.绑定class

v-bind绑定数据到class和style，数据类型可以是 array object

1-1.对象绑定class

要显示的class为对象的键，显示与否取决于值为true/false

<div class="title" :class="{active:isActive,'txt':isTxt}">wahaha</div>
<div class="title" :class="obj">wahaha</div>
data: {
                isActive:true,
                isTxt:false,
                obj:{
                    active:true,
                    txt:false
                }
       }
           

1-2.数组绑定class

要显示的class为数组内变量的值，

<div class="aa" :class="[activeClass,txtClass]">2222222</div>
data: {
	activeClass:'active',
    txtClass:'txt',
}
           

1-3.组件绑定class

//定义自定义组件wa
Vue.component('wa', {
    template: '<p class="txt">hello...</p>'
})
//使用自定义组件wa
<wa class="active" :class="{bg:true}"></wa>
//页面渲染结果
<p class="txt active bg">Hi</p>
           

2.绑定style

2-1.对象绑定style

需要显示的样式属性在前面，具体是值控制显示结果

ps:用-连接的样式，要换成小驼峰的写法

<div :style="{color:activeColor,fontSize:fontSize}">style111</div>
<div :style="obj2">style111</div>
data：{
	activeColor:'red',
   fontSize:'40px',
    obj2:{
       color:'red',
       fontSize:'40px',
   }
}
           

2-1.数组绑定style

<div :style="[arr3,fs40]">style-array</div>
data:{
    arr3:{
        color:'green',
    },
    fs40:{
        fontSize:'40px'
    }
}