vue----class样式技巧

由于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'
}
})