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>
效果如下