由于Mustache 语法不能在HTML 标签的属性上使用,因此Vue.js 提供了v-bind 指令来解决这类问题。
<div id="app">
<img v-bind:src="imgSrc" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
imgSrc:'img/logo.png'
}
})
</script>
v-bind:src=“imgSrc”动态绑定了src 的值,这个值在Vue.js 构造器里通过data
对象添加imgSrc 属性,用于HTML 调用。
v-bind 指令**可以缩写为
:
**<img:src=“imgSrc” />
使用v-bind 指令绑定HTML 元素的class 属性。
.fontSize{font-size: 12px}
.fontColor{color: red}
<div id="app">
<p class="slogan" v-bind:class="{'fontSize':isSize,'fontColor':isColor}">
专注于为企业提供互联网解决方案!
</p>
</div>
// JS 代码
var vm = new Vue({
el: '#app',
data: {
isSize:true,
isColor:true
}
})
v-bind 指令也可以直接绑定data 里的一个对象。以下示例为利用v-bind 指令绑定一个class 对象。
.fontSize{font-size: 12px}
.fontColor{color: red}
<div id="app">
<p class="slogan" v-bind:class="classObject">
专注于为企业提供互联网解决方案!
</p>
</div>
// JS 代码
var vm = new Vue({
el: '#app',
data: {
classObject:{
'fontSize':true,
'fontColor':true
}
}
})
v-bind 指令也可以绑定一个数组对象。下面示例利用v-bind 指令绑定一个数组对象,以应用一个class
属性列表。
.fontSize{font-size: 12px}
.fontColor{color: red}
<div id="app">
<p class="slogan" v-bind:class="[classA,classB]">
专注于为企业提供互联网解决方案!
</p>
</div>
// JS 代码
var vm = new Vue({
el: '#app',
data: {
classA:'fontSize',
classB:'fontColor'
}
})
如果需要根据条件来切换样式,v-bind 指令提供绑定一个三元运算表达式的方式。
<div id="app">
<p class="slogan" v-bind:class="[isChoose?classA:classB]">
专注于为企业提供互联网解决方案!
</p>
</div>
// JS 代码
var vm = new Vue({
el: '#app',
data: {
classA:'fontSize',
classB:'fontColor',
isChoose:false
}
})
以上代码中, 首先判断isChoose 的布尔值, 如果为true, 则渲染classA; 如果为false, 则渲染
classB。
对于多个class 属性值,可以采用如下绑定方式。
<div v-bind:class=”[classA, { classB: isB, classC: isC }]”>
.v-bind 指令除了可以绑定class 属性添加样式以外,同样也可以通过该指令绑定style 属性,绑定形式与
绑定class 属性类似,需要注意的是,设置的CSS 属性名必须用驼峰命名法。以下示例为利用v-bind 指令绑
定style 属性,属性中的JavaScript 对象采用了驼峰命名法。
<div id="app">
<p v-bind:style="{fontSize:size,backgroundColor:bgColor}">
专注于为企业提供互联网解决方案!
</p>
</div>
// JS 代码
var vm = new Vue({
el: '#app',
data: {
size:'32px',
bgColor:'red'
}
})