v-bind 动态绑定属性
之前用vue中的mustache语法来方便内容的动态绑定,但是某些属性我们也希望能动态绑定
例如:a元素的herf属性,img元素的src属性
这里错误的原因在于,mustache语法不能用于属性中,只能用于内容中。
v-bind的语法糖(简写)
:
v-bind用于绑定class(对象语法)
由于v-bind是用于动态绑定属性的,而class也属于属性的一部分,所以v-bind也可以用于绑定class
除了可以简单的绑定data中获取的string,也可以获取布尔值,如:
v-bind:class = ‘这里可以写对象key:value’,用于比如一个列表,要求其在点击之前是一个颜色,点击之后就得换个颜色,这时候可以设置一个button,用v-on绑定监听事件,当点击之后,class中的布尔值就会跟着改变,从而使其的class发生改变,进而改变其颜色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 class="active">{{message}}</h2>-->
<!-- <h2 :class="ac">{{message}}</h2>-->
<!-- <h2 v-bind:class="{key1:value1,key2:value2}">{{message}}</h2>-->
<!-- <h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2>-->
<h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
<button v-on:click="btnClick" >按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
ac: 'active',
isActive:true,
isLine:true
},
methods:{
btnClick:function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
如果项目中有需要一直存在的class可以直接写到前面,和动态绑定的共存
v-bind用于绑定class(数组语法)
<div id="app">
<h2 :class="['active',line]">{{message}}</h2>
<h2 :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
active:'aaaaa',
line:'bbbbbb'
},
methods:{
getClasses: function () {
return [this.active,this.line]
}
}
})
v-bind用于绑定style(对象语法)
这个是错的因为vue在编译的时候会把50px识别为一个变量,会从下面data中找这个变量,所以要加上单引号(key可以不加单引号,但是value必须要加)
<div id="app">
<!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->
<!-- <h2 :style="{fontSize:'50px'}">{{message}}</h2>-->
<h2 :style="{fontSize:finalSize +'px','color':finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
fSize:'100px',
finalSize:100,
finalColor:'red',
}
})
</script>
如果嫌style内容过多,可以将方法抽取到下方
<h2 :style=getStyles()>{{message}}</h2>
...
methods:{
getStyles:function () {
return {fontSize:this.finalSize +'px','color':this.finalColor}
}
}
v-bind用于绑定style(数组语法)
<div id="app">
<h2 :style="[baseStyles,baseStyles1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
baseStyles:{background:'red'},
baseStyles1:{fontSize:'100px'}
}
})
</script>