绑定标签属性
像div、p、img等等都是标签,img标签中的src就是一个属性。
未使用v-bind:
<div>
<img src="..." width="200px"/>
</div>
使用v-bind:
<div>
<img v-bind:src="imgSrc" width="200px"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
imgSrc:'...',
}
})
</script>
存在简写方法,即将v-bind省略,留下冒号:
<div>
<img :src="imgSrc" width="200px"/>
</div>
先列出接下来示例中的所需要的js和样式:
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgSrc: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3755764342,2798173177&fm=26&gp=0.jpg',
className: 'classA',
isOk: true,
classA: 'classA',
classB: 'classB',
isTrue: true,
red: 'red',
font: '20px',
styleObject: {
color: 'green',
fontSize: '40px',
}
}
})
</script>
//css样式
<style>
.classA {
color: red;
}
.classB {
font-size: 150%;
}
</style>
示例1:绑定class属性
其中className绑定的是classA样式,结果显示的是classA的样式。
<div :class="className">1、绑定Class</div>
示例2:给class绑定一个判断
此处结合了v-model指令,对isOk进行一个值的改变,通过isOk的改变来判断是否使用classA的样式。
<div :class="{classA:isOk}">2、绑定Class中的判断
<input type="checkbox" id="isOk" value="isOk" v-model="isOk">
<label for="isOk">{{isOk}}</label>
</div>
示例3:以数组的形式绑定class
class属性中是一个数组,同时在data中声明classA,classB,会同时显示classA和classB的样式。
<div :class="[classA,classB]">3、以数组的形式绑定class</div>
示例4:通过三元运算符绑定class
类似于上面的绑定一个判断,不过是通过isTrue这个媒介,利用三元运算符来决定显示的是哪个样式。
<div :class="isTrue?classA:classB">4、通过三元运算符绑定class
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
</div>
示例5:绑定style
写法与内联css样式类似,但是需要申明red和font。
注意:在vue中,不支持font-size的写法,支持fontSize。
<div :style="{color:red,fontSize:font}">5、绑定style</div>
示例6:通过对象绑定style
styleObject声明为一个对象。
<div :style="styleObject">6、以对象形式绑定style</div>