Vue2.0筆記——屬性綁定和Class與Style綁定
通過指令v-bind可以綁定屬性,該指令同v-on一樣，也有一個簡寫，“：”冒號。
綁定元素的屬性，並且可與元素的原屬性共存。當原屬性有值時則顯示原屬性的值，無值則使用綁定的值。
<div id="app">
<img :src="url" :width="width" width="800" :height="height"/>
</div>
data:{
url:"https://www.baidu.com/img/bd_logo1.png",
width:300,
height:300
}這是屬性綁定的用法。
Class與Style綁定
我們同常綁定class時，直接寫在class中,這是普通的css綁定。
<style>
.aa{
color: red;
}
.bb{
color: blue;
}
</style>
<p class="aa">這是一段文字，用來測試Class與Style綁定</p>而如果將這種普通綁定應用在Vue中是不行的。不能直接寫:class=‘aa‘
<p :class="aa">這是一段文字，用來測試Class與Style綁定</p>這樣做它是不會顯示出來的。
我們需要通過Vue數據data來動態實現。
直接通過data選項中變量 的方式
先定義class樣式，然後再:class裏填寫與樣式名綁定的名稱
data:{
color:‘aa‘
}
<p :class="color">通過Vue中data選項的變量來動態控制</p>此時color值為aa，那麽麽顏色就是red,如果動態的為color屬性值賦值為bb，那麽字體顏色就為blue了。
通過數組的方式
.line{
text-decoration: underline;
}
<p :class="[color,line]">通過數組的方式來控制多個</p>另外，指令中是可以有表達式的，就如上面的數組，還可以對data選項的某個number類型的屬性進行數據操作，它僅能實現小的操作，而不能去實現語句。
通過json格式的方式綁定
這次可以不與data選項的屬性有牽扯,直接通過設置類樣式的值為true|false
為true則使用這個樣式，為false則不使用這個樣式，通過true|false來判定是否出現樣式。這種方式也是最佳常用的。
<p :class="{bb:false,line:true}">通過json的方式來綁定class</p>由於，值為true|false，那麽麽我們也可以通過值大小的方式給定true或false。
data:{
num:-99
}
<p :class="{bb:false,line:num>0}">通過json的方式來綁定class</p>此時line的屬性值是返回false，此時不會顯示下劃線。
通過變量引用json形式
就是不把json數據寫在：class中了，而是定義為實例的一個屬性，放在data中。
格式還是這樣，不過是放在一個屬性中。
data:{
line_blue:{aa:true,line:true}
}
<p :class="line_blue">通過json變量的方式來綁定</p>另外，在數組和json中都可以使用三元表達式？ ：的方式。
綁定內聯樣式
即通過綁定style, :style方式
data:{
color:red,
fontSize:20,
}
<p :style="{color:color,fontSize:fontSize + ‘px‘}">綁定內聯</p>因為內聯的style可以直接在元素中寫，所以json中的key都是css屬性，color,textDecoration,fontSize這些內聯的樣式，(內聯的和style文件內的樣式名不一樣,文件裏是橫杠，內聯是駝峰首字母大寫)。
另一個就是直接通過屬性的方式了，把json賦值給屬性。
data:{
style1:{color:‘blue‘,fontSize:‘15px‘}
}
<p :style="style1">綁定內聯</p>同樣，數組也是可以的。
多重值
綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶前綴的值
<div :style="{ display: [‘-webkit-box‘, ‘-ms-flexbox‘, ‘flex‘] }"></div>這樣寫只會渲染數組中最後一個被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那麽就只會渲染 display: flex。
Vue2.0筆記——屬性綁定和Class與Style綁定