Vue.js學習筆記：屬性綁定 v-bind

標籤：vue.js指令 v-bind :src :class   :style 屬性綁定

v-bind  主要用於屬性綁定，Vue官方提供了一個簡寫方式 :bind，例如：

<!-- 完整文法 --><a v-bind:href="url"></a>

<!-- 縮寫 --><a :href="url"></a>

綁定HTML Class

一、對象文法：

我們可以給v-bind:class 一個對象，以動態地切換class。注意：v-bind:class指令可以與普通的class特性共存

HTML代碼：

<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">    <li>學習Vue</li>    <li>學習Node</li>    <li>學習React</li></ul>

CSS代碼：

.box{    border:1px dashed #f0f;}.textColor{    color:#f00;    background-color:#eef;}.textSize{    font-size:30px;    font-weight:bold;}

JS代碼：

var vm= new Vue({    el:‘.box‘,    data:{        isColor:true,        isSize:true    }})

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/89/32/wKiom1gLEX3ygKjKAADBZbnUz8Y282.png" title="QQ20161022151126.png" alt="wKiom1gLEX3ygKjKAADBZbnUz8Y282.png" />

可以看到，HTML最終渲染為 <ul class="box textColor textSize"></ul>

當 isColor 和 isSize 變化時，class列表將相應的更新，例如，將isSize改成false，class列表將變為 <ul class="box textColor"></ul>

也可以直接綁定資料裡的一個對象：

HTML代碼：

<ul class="box" :class="classObject">    <li>學習Vue</li>    <li>學習Node</li>    <li>學習React</li></ul>

JS代碼：

var vm= new Vue({    el:‘.box‘,    data:{        classObject:{            ‘textColor‘:true,            ‘textSize‘:false //不渲染，注意看下面的        }    }})

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/89/2F/wKioL1gLE7jBVrvSAACSP3ftTFM106.png" title="QQ20161022152211.png" alt="wKioL1gLE7jBVrvSAACSP3ftTFM106.png" />

二、數組文法

我們可以把一個數組傳給v-bind:class，以應用一個class列表

HTML代碼：

<ul class="box" :class="[classA, classB]">    <li>學習Vue</li>    <li>學習Node</li>    <li>學習React</li></ul>

JS代碼：

var vm= new Vue({    el:‘.box‘,    data:{        classA:‘textColor‘,        classB:‘textSize‘    }})

如果想根據條件切換列表中的class，可以用三目運算

HTML代碼：

<ul class="box" :class="[isA?classA:‘‘, classB]">    <li>學習Vue</li>    <li>學習Node</li>    <li>學習React</li></ul>

JS代碼：

var vm= new Vue({    el:‘.box‘,    data:{        classA:‘textColor‘,        classB:‘textSize‘,        isA:false     }})

在這個例子中，首先判斷isA的boolean值，如果為true，則渲染classA；如果為false，則不渲染。classB沒有做三目運算，所以是始終顯示的，看看頁面

650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/89/2F/wKioL1gLFw7zSxVrAACvZz_XHmk974.png" title="QQ20161022153256.png" alt="wKioL1gLFw7zSxVrAACvZz_XHmk974.png" />

對於多個class，可以這麼寫：

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

綁定內聯樣式

一、對象文法

v-bind:style 的對象文法十分直觀--非常像CSS，其實它是一個Javascript對象，CSS屬性名稱必須用駝峰命名法 （官方文檔寫的是既可以用駝峰也可以用 短橫分隔命名法），但是用短橫分隔是會報錯的

HTML代碼：（這裡示範CSS屬性名稱用短橫分隔報錯）

<div id="box" :style="{color:activeColor, font-size:size}">紅嘴綠鸚哥</div>

JS代碼：

var vm= new Vue({    el:‘#box‘,    data:{        activeColor:‘#f00‘,        size:‘30px‘,        shadow:‘5px 2px 6px #000‘    }})

頁面報錯：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/89/32/wKiom1gLIfCj-mf7AABB3Aq2nvA671.png" title="QQ20161022162239.png" alt="wKiom1gLIfCj-mf7AABB3Aq2nvA671.png" />

當我們按照駝峰命名法的規則去寫的時候，一切正常：

HTML代碼：

<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">紅嘴綠鸚哥</div>

查看頁面效果：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/89/30/wKioL1gLIyqzc363AADADIC58MM045.png" title="QQ20161022162451.png" alt="wKioL1gLIyqzc363AADADIC58MM045.png" />

也可以直接綁定到一個樣式對象，這樣更好，讓模板更清晰：

HTML代碼：

<div id="box" :style="styleObject">紅嘴綠鸚哥</div>

JS代碼：

var vm= new Vue({    el:‘#box‘,    data:{        styleObject:{            color:‘red‘,            fontSize:‘30px‘        }    }})

二、數組文法

可將多個樣式對象應用到一個元素上

HTML代碼：

<div class="box" :style="[styleObjectA, styleObjectB]">好好學習，天天向上</div>

JS代碼：

var vm2= new Vue({    el:‘.box‘,    data:{        styleObjectA:{            fontSize:‘36px‘,            color:‘blue‘        },        styleObjectB:{            textDecoration:‘underline‘        }    }})

頁面效果：

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M02/89/30/wKioL1gLJXeTZM4OAACU_F16ll4819.png" title="QQ20161022163755.png" alt="wKioL1gLJXeTZM4OAACU_F16ll4819.png" />

添加圖片SRC地址

給img標籤的src屬性賦值時，按照傳統的方法{{url}}：

HTML代碼：

<img class="box" src="{{url}}" >

JS代碼：

var vm= new Vue({    el:‘.box‘,    data:{        url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘    }})

此時，圖片可以正常顯示，但是會報一個404錯誤，查看控制台可以看到，Vue更加推薦我們使用 v-bind:src

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/89/32/wKiom1gLKJPD1XHwAACC8OiRT9Y083.png" title="QQ20161022165050.png" alt="wKiom1gLKJPD1XHwAACC8OiRT9Y083.png" />

使用 v-bind:src  再來試試看

HTML代碼：

<img class="box" :src="url" >

查看頁面：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/89/30/wKioL1gLKTuSVDu_AABbyo9XNJc308.png" title="QQ20161022165404.png" alt="wKioL1gLKTuSVDu_AABbyo9XNJc308.png" />

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1864584

Vue.js學習筆記：屬性綁定 v-bind