v-bind用於動態地綁定一個或多個特性，或一個組件 prop 到表達式。
v-bind 綁定src、href
動態設置img的src，a的href需要通過v-bind指令，如果不使用v-bind指令，將無法解析變量的值。如下所示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="hrefurl">w3school</a>
<img v-bind:src="imgurl"/>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello vue!",
hrefurl:"https://www.w3school.com.cn/",
imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583839778569&di=85691ea380fb3675fa451798ae7d3df4&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1032090787%2C3027113824%26fm%3D214%26gp%3D0.jpg"
}
});
</script>
</body>
</html>
效果如下
v-bind綁定class
通過v-bind動態設置class，class的值可以是對象{classname1:boolean1,classname2:boolean2},也可以是數組[classname1,classname2]
對象比較常用，boolean爲true或者false分別表示添加和移除該class
如下所示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/vue.js"></script>
<style>
.red {
color:red;
}
.fontsize {
font-size:30px;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{red:isred,fontsize:isfontsize}">{{message}}</p>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello vue!",
isred:true,
isfontsize:true
}
});
</script>
</body>
</html>
效果如下
如果綁定的class比較多， 爲了美觀，可以通過調用方法綁定多個class，將對象通過方法返回，但是需要注意在方法裏面訪問變量需要加this,效果是一樣的。如下所示
<div id="app">
<p v-bind:class="getallclass()">{{message}}</p>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello vue!",
isred:true,
isfontsize:true
},
methods:{
getallclass:function()
{
return {red:this.isred,fontsize:this.isfontsize};
}
}
});
</script>
v-bind綁定style
通過v-bind動態設置style，與class類似，style的值可以是對象{key1:value1,key2:value2},也可以是數組
對象比較常用，key和value分別對應屬性和值
如下所示
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-bind:style="getallstyle()">{{message}}</p>
</div>
<script>
const vue = new Vue({
el:"#app",
data:{
message:"hello vue!",
redcolor:'blue',
fontsize:50
},
methods:{
getallstyle:function()
{
return {color:this.redcolor,fontSize:this.fontsize+'px'};
}
}
});
</script>
</body>
</html>
效果如下
