VUE 属性绑定
给A标签的url进行动态的绑定
两种方式
1.v-bind:href="Url" 无简写版本Vue
2、:href="Url" 简写版本
<div id="Bind"><a v-bind:href="Url">百度</a>
<input id="Button1" v-on:click="handle" type="button" value="切换" />
</div>
var Bind = new Vue({el: "#Bind",
data: {
Url:"http://www.baidu.com"
},
methods: {
handle: function () {
this.Url="https://www.kxdao.net/forum.php"
}
}
})
可以动态的更换Url
------------------Style 样式的绑定
<style>.active{
border:1px solid red;
width:100px;
height:100px;
}
.error{
background-color:orange;
}
</style>
<div ><div v-bind:class="{active:isActive,error:isError}">
测试样式
</div>
<input />
</div>
var style = new Vue({el: "#Style",
data: {
isActive: true,
isError: true
},
methods: {
handle: function () {
//控制isActive的值在true和false之间进行切换
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
})
<div v-bind:class="{active:isActive,error:isError}">
我们可以看到这种键值对类型,active对应我们在上面定义的Style,后面跟一个isActive这是表示,如果这个值为true,样式就会绑定上,反之不会绑定。
以上是 VUE 属性绑定 的全部内容, 来源链接: utcz.com/z/379266.html