一、v-bind 用于绑定一个或者多个属性值，或者向另一个组件传递props值 ( 比如图片的链接src、网站的链接href、动态绑定一些类、样式等等 )
下图是通过 v-bind 绑定a标签的href 和 图片的src属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--错误的做法：这里不允许使用mustache语法-->
<!--<img src=" {{ ImageUrl }} " alt="">-->
<!--正确的做法：使用 v-bind语法 -->
<img v-bind:src="ImageUrl" alt="">
<a v-bind:href="aUrl">百度一下</a>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
ImageUrl:"https://img0.baidu.com/it/u=610860566,2770891376&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
aUrl:"https://www.baidu.com",
}
});
</script>
</body>
</html>
二、v-bind语法糖
v-bind对应的语法糖，简写形式 ，通常在编写代码时使用缩写的方式
<a v-bind:href="aUrl">百度一下</a> 为<a :href="aUrl">百度一下</a>
三、 v-bind动态绑定 class ( 对象语法 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
<style>
.active{
color: red;
}
.line{
font-style: initial;
font-weight: bolder;
font-family:Verdana, Geneva, Tahoma, sans-serif
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 :class="activeC">{{message}}</h2> -->
<!-- <h2 :class="{key1:value1 , key2:value2}">{{message}}</h2> -->
<span :class="{ active : IsactiveC }">{{message}}</span>
<br/>
<span :class="getClasses()">{{message}}</span>
<br/>
<button v-on:click="isBtnClick">按钮</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
IsactiveC:true,
IsLine:true
},
methods:{
isBtnClick:function(){
this.IsactiveC=!this.IsactiveC;
},
getClasses:function(){
return { active : this.IsactiveC , line : this.IsLine }
}
}
});
</script>
</body>
</html>
四、02-v-bind动态绑定class(数组语法)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
<style>
.active{
color: red;
}
.line{
font-style: oblique;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['active','line']"> {{message}} </h2>
<h2 :class="getClassSe()"> {{message}} </h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
actives:"aaaaaa",
lines:"bbbbb",
},
methods:{
getClassSe:function(){
return [ this.actives , this.lines ]
}
}
});
</script>
</body>
</html>