v-bind主要用于动态的绑定属性。比如绑定title:
v-bind:title="myTitle"
可以简写为：
:title="myTitle"
绑定多个属性：
:title="myTitle" :id="myId"
绑定class
<ul class="box" v-bind:class="{'textColor': isColor, 'textSize': isSize}">
<li>1111</li>
<li>222</li>
</ul>
new Vue({
el: "#app",
data: {
isColor: true, //这里定义一个布尔值，为真绑定对应的class，为假不绑定
isSize: true,
}
})
当isColor为真的时候给ul绑定textColor样式，当isSize为真的时候给ul绑定textSize样式。
HTML最终渲染为<ul class="box textColor textSize">...</ul>
也可以直接绑定数据里的一个对象:
<ul class="box" :class="classObject">
<li>111</li>
<li>222</li>
</ul>new Vue({
el: "#app",
data: {
classObject:{
textColor: true, //这里直接写样式名，为真添加，为假不添加
textSize: true,
}
}
})
还可以将一个数组传递给v-bind:class,以应用一个class列表
<ul :class="[class1, class2]">
<li>111</li>
<li>222</li>
</ul>
new Vue({
el: "#app",
data: {
class1: "cBlue"，
class2: "fontSize36"
}
})html最终渲染为 <ul class="cBlue fontSize36"> ... </ul>
如果想根据条件切换列表中的class，可以用三目运算:
<ul :class="[isA?class1:' ', class2]">
<li>1111</li>
<li>222</li>
</ul>new Vue({
el: "#app",
data: {
class1: "cBlue",
class2: "fontSize36",
isA: true,
}
})
绑定内联样式
一、对象语法
v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的:
<h3 v-bind:style="{font-size: fontSize, color:fontColor}">v-bind:style行内样式</h3> 报错
正确的写法：
<h3 v-bind:style="{fontSize: fontSize, color:fontColor}">v-bind:style行内样式</h3>
new Vue({
el: "#app"，
data: {
fontSize: "56px",
fontColor: "yellow",
}
})
也可以直接绑定到一个样式对象，这样更好，让模板更清晰：
<ul v-bind:style="styleObject">
<li>111</li>
<li>222</li>
</ul>
new Vue({
el: "#app",
data: {
styleObject：{
color: "pink",
fontSize: "108px",
}
}
})html最终渲染为 <ul style="color:pink, font-size:108px"> ... </ul>
二、数组语法
可将多个样式对象应用到一个元素上
<ul v-bind:style="[styleArrayA, styleArrayB]">
<li>111</li>
<li>222</li>
</ul>
new Vue({
el: "#app",
data: {
styleArrayA: {
color: "#8B00FF",
fontSize: "36px",
},
styleArrayB: {
textDecoration:"underline",
}
}
})
绑定图片src地址
<img :src="url"/>
new Vue({
el: "#app",
data: {
url: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"
}
})
推荐使用v-bind:src="url"这种方式绑定。
