四. 动态绑定属性
4.1 v-bind的基本使用
某些时候我们并不想将变量放在标签内容中,像这样<h2>{{name}}</h2>
是将变量h2标签括起来,类似js的innerHTML。但是我们期望将变量url
写在如下位置,想这样<img src="url" alt="">
导入图片是希望动态获取图片的链接,此时的url并非变量而是字符串url,如果要将其生效为变量,需要使用到一个标签v-bind:
,像这样<img v-bind:src="url" alt="">
,而且这里也不能使用Mustache语法,类似<img v-bind:src="{{url}}" alt="">
,这也是错误的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--在v-bind里不能使用{{Mustache}}语法-->
<!--<img v-bind:src="{{url}}" alt=""> -->
<!--v-bind的正确用法 -->
<img v-bind:src="url" alt="">
<!--v-bind语法糖: -->
<a :href="aurl">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
name:'呈现',
message:function (){
console.log('xxx');
},
url:'https://exp-picture.cdn.bcebos.com/edd84743040148fe988051df8fd149299b88021a.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1',
aurl:'http://www.baidu.com'
},
methods:{}
})
</script>
</body>
</html>
此时vue对象中定义的urlL
变量和aurl
变量可以动态的绑定到img标签的src属性和a标签的href属性。v-bind:
由于用的很多,vue对他有一个语法糖的优化写法也就是:
,此时修改imgURL变量图片叶重新加载。
4.2 v-bind动态绑定class(对象语法)
有时候我们期望对Dom元素的节点的class进行动态绑定,选择此Dom是否有指定class属性。例如,给h2标签加上class="active"
,当Dom元素有次class时候,变红<style>.active{color:red;}</style>
,在写一个按钮绑定事件,点击变黑色,再次点击变红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<!--对象语法-->
<div id="app">
<h2 v-bind:class="{active:isActive}">{{name}}</h2>
<button @click="clicked">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
name:'呈现',
message:function (){
console.log('xxx');
},
isActive:false,
},
methods:{
clicked:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
定义两个变量active
和isActive
,在Dom元素中使用:class={active:isActive}
,此时绑定的class='active'
,isActive为true,active显示,定义方法change()绑定在按钮上,点击按钮this.isActive = !this.isActive
,控制Dom元素是否有class='active'
的属性。
4.3 v-bind动态绑定class(数组语法)
- class属性中可以放数组,会依次解析成对应的class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['active','line']">数组</h2>
<h2 :class="getSome()">数组</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
name:'呈现',
message:function (){
console.log('xxx');
},
isActive:'active',
isLine:'line'
},
methods:{
getSome:function () {
return [this.isActive,this.isLine];
}
}
})
</script>
</body>
</html>
- 加上单引号的表示字符串
- 不加的会当成变量
- 可以直接使用方法返回数组对象
代码实现效果:
4.4 v-bind动态绑定style
- 类似绑定class,绑定style也是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="getStyle()">{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
name:'呈现',
message:function (){
console.log('xxx');
},
finalColor:'red',
finalSize:100
},
methods:{
getStyle:function(){
return {backgroundColor:this.finalColor,fontSize:this.finalSize+'px'}
}
}
})
</script>
</body>
</html>
4.5 v-bind与v-for的结合使用(作业)
- 实现当用户点击某一个li,被点击的li变红色(排他法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li @click="clicked(index)" :class="{active:isActive==index}" v-for="(m,index) in movie">{{index}}-{{m}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
let app =new Vue({
el:'#app',
data:{
name:'呈现',
message:function (){
console.log('xxx');
},
movie:['海泽旺','名侦探','阿拉丁','神灯'],
isActive:0
},
methods:{
clicked:function (index) {
this.isActive = index;
}
}
})
</script>
</body>
</html>
效果图: