动态绑定属性
1.之前都是通过mustance语法绑定数值到内容当中,但是有时候很多情况我们都需要绑定到属性中;
2.例如 <img src="imgUrl" alt=""/>,此时就需要 v-model 标签了,还有 href 标签等。
基础版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgUrl" alt=""/>
<img src="imgUrl" alt=""/><!--不管用-->
<img v-bind:src="imgUrl" alt=""/>
</div>
<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
imgUrl: 'https://img.alicdn.com/imgextra/i4/28505401/O1CN01Za2u7a1plhpGwPO7z_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'
}
})
</script>
</body>
</html>
进阶版(对象语法):v-bind 动态绑定class属性,然后根据class属性去定义颜色
vue class对象的运用以及class属性的合并验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!--定义属性active-->
<h2 class="active">{{message}}</h2>
<!--v-model绑定class属性-->
<h2 :class="cModelActive">{{message}}</h2>
<!--
注意:下面是一个大框,表示一个对象,而不是mustance语法,对象可以放键值对
这个class 可以赋予多重几个属性,进行合并
因此,我们控制这个boolean进行控制这个类属性是否合并到这个class上
<h3 v-bind:class="{类名1:true,类名:boolean}"></h3>
下面举例验证
-->
<!--v-model绑定class属性-->
<h2 :class="{active:activeBoolean,line:lineBoolean}">{{message}}</h2>
<!--点击事件控制Boolean值的变化-->
<button v-on:click="btnClick">按钮</button>
</div>
<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '你好啊,华为!',
// class属性赋值 active
cModelActive: 'active',
// Boolean
activeBoolean: true,
lineBoolean: true
},
methods: {
btnClick:function (){
this.activeBoolean = !this.activeBoolean;
}
}
})
</script>
</body>
</html>
注意:class同一个元素可以有两个class
<h2 :class = "title" :class ="{'active':isActive,'line':isLine}">Hello world</h2>
考虑:由于对象语法可能会加载更多的class是,就会导致 line 太长,用起来不太方便;
所以对 v-bind 属性绑定进行优化,把class属性放到methods方法中进行赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<h2 class="title" :class="{active:activeBoolean,line:lineBoolean}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
<!--
考虑:由于对象语法可能会加载更多的class是,就会导致 line 太长
用起来不太方便
-->
<h2 class="title" :class="getClass()">{{message}}</h2>
</div>
<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '你好啊,华为!',
// class属性赋值 active
cModelActive: 'active',
// Boolean
activeBoolean: true,
lineBoolean: true
},
methods: {
btnClick:function (){
this.activeBoolean = !this.activeBoolean;
},
getClass:function (){
return {active:this.activeBoolean,line:this.lineBoolean}
}
}
})
</script>
</body>
</html>