在vue中，v-bind指令主要用於屬性綁定，完整語法“v-bind:property="value"”，縮寫語法“:href="value"”；表明將該屬性的屬性值當成一個變量，vue會對它解析，並將解析到的變數賦予data屬性中對應的值。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
vue中v-bind介紹
#v-bind 主要用於屬性綁定，比方你的class屬性，style屬性，value屬性，href屬性等等，只要是屬性，就可以用v-bind指令來綁定。
v-bind 主要用於屬性綁定，Vue官方提供了一個簡寫方式:bind,如：
<!-- 完整语法 --> v-bind:property="value" //此时 value会被解析成一个变量，若是在vue实例中没有找到，会显示找不到错误 <!-- 缩写 --> :href="value"
加上v-bind後，就表示將該屬性的屬性值當成一個變數 vue會對它解析，將解析到的變數 賦予data屬性中對應的值。
綁定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>.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}var vm= new Vue({
el:‘.box‘,
data:{
isColor:true,
isSize:true
}
})#也可以直接綁定資料裡的物件：
HTML程式碼：
<ul class="box" :class="classObject">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>var vm= new Vue({
el:‘.box‘,
data:{
classObject:{
‘textColor‘:true,
‘textSize‘:false //不渲染，注意看下面的截图
}
}
})二、陣列語法
我們可以把一個陣列傳給v-bind:class，以應用一個class清單HTML程式碼：
<ul class="box" :class="[classA, classB]">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>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>var vm= new Vue({
el:‘.box‘,
data:{
classA:‘textColor‘,
classB:‘textSize‘,
isA:false
}
})#對於多個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>var vm= new Vue({
el:‘#box‘,
data:{
activeColor:‘#f00‘,
size:‘30px‘,
shadow:‘5px 2px 6px #000‘
}
})
<div id="box" : style="max-width:90%">红嘴绿鹦哥</div>
也可以直接綁定到樣式對象，這樣更好，讓模板更清楚：
HTML程式碼：<div id="box" : style="max-width:90%">红嘴绿鹦哥</div>
var vm= new Vue({
el:‘#box‘,
data:{
styleObject:{
color:‘red‘,
fontSize:‘30px‘
}
}
})#二、陣列語法
可將多個樣式物件套用到一個元素上HTML程式碼：<div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>
var vm2= new Vue({
el:‘.box‘,
data:{
styleObjectA:{
fontSize:‘36px‘,
color:‘blue‘
},
styleObjectB:{
textDecoration:‘underline‘
}
}
})
為img標籤的src屬性賦值時，依照傳統的方法{{url}}：
HTML程式碼：
<img class="box" src="{{url}}" alt="vue中v-bind有什麼用" >
var vm= new Vue({
el:‘.box‘,
data:{
url:‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc76vue中v-bind有什麼用‘
}
})
#
使用 v-bind:src 再来试试看
HTML代码：
<img class="box" :src="url" alt="vue中v-bind有什麼用" >
查看页面截图：
以上是vue中v-bind有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
