一、對象語法綁定class屬性
class的屬性代碼如下
<style type="text/css">
.red{
color: red;
width: 100px;
height: 100px;
border: 2px;
border-color: blue;
border-style: solid;
}
</style>
1、用之前的方法綁定一下class屬性
<div class="red">11111111111</div>
2、使用v-bind的方式，綁定一個字符串
<!-- 綁定的方式1，寫一個字符串 --> <div v-bind:class="'red'">22222222222222</div>
3、使用v-bind的方式，綁定一個屬性
<!-- 綁定的方式2，寫一個屬性 --> <div v-bind:class="cls">3333333333333</div>
4、使用v-bind的方式，綁定一個對象
<!-- 綁定的方式3，寫一個對象，當isred為true，則加上這個類，如果isred為false，則不加這個類 -->
<div v-bind:class="{red:isRed}">444444444444444</div>
這里還需要在vue對象中定義isRed這個屬性
5、使用v-bind的方式，綁定一個計算屬性
<!-- 綁定的方式4，寫一個計算屬性的get方法 --> <div v-bind:class="classObj">55555555555</div>
還需要定義一個get方式的計算屬性
二、數組語法綁定class屬性
先看css的class屬性
<style type="text/css">
.red{
color: red;
width: 200px;
height: 200px;
border: 2px;
border-color: blue;
border-style: solid;
}
.bg{
background-color: yellow;
}
</style>
1、使用v-bind的方式，綁定一個數組模式的class屬性
<div v-bind:class="[class1,class2]">22222222</div>
當然我們還需要在vue實例中定義這2個屬性的值
2、使用v-bind綁定一個三元運算符
<div v-bind:class="[isActive?class1:class2]">3333333</div>
當然我們還需要在vue實例中定義isActive這個屬性，如果該屬性為真，則添加class1對應的class樣式，如果該屬性為false，則添加class2對應的class樣式
3、還可以在數組中寫一個對象，同樣使用v-bind語法
<div v-bind:class="[{'bg':isActive},class1]">44444444</div>
如果isActive為真，則添加bg這個class屬性，所以我們需要在vue的實例對象中定義isActive這個屬性
4、同樣這里也可以寫一個計算屬性
<div v-bind:class="classComputed">555555</div>
同樣看下計算屬性這個方法是怎么寫的
5、直接綁定一個屬性
<div v-bind:class="classobj">6666666</div>
同樣需要定義一個屬性
三、綁定html到組件上
先寫一個組件
Vue.component('tou', {
template: `<div>
<input type="button" value="彈出" v-on:click="alertfunction">
<div>內容區域</div>
</div>`,
// 這里就是頭部組件中的代碼
methods:{
alertfunction:function(){
alert(123);
}
}
})
然后使用這個組件
<div id="app"> <tou v-bind:class="classobj"></tou> </div>
最后我們定義classobj這個對象
如果我們給組件添加class屬性，是把class屬性添加到組件的根元素上，且是追加的方式添加class屬性，不會被覆蓋原有的屬性
根元素就是div標簽
四、綁定內聯樣式
1、默認的綁定方式
<div style="height:100px;width=100px;color:red;border-style: solid;">1</div>
2、對象的語法
<div v-bind:style="{'height':h,'width':w,'color':r,'border-style':s}">2</div>
我們還需要在vue實例中定義屬性
3、同樣也可以綁定一個對象
<div v-bind:style="styleObj">3</div>
對象按照下面的格式寫
4、傳遞一個數組對象進去
<div v-bind:style="[styleObj,styleObj2]">4</div>
同樣我們需要定義這2個對象
