首先,v-bind的基础用法,就是用来绑定html中元素的属性。什么叫“html中元素的属性”?
例如,img、a等等是html元素,而img中的src则是该元素的属性值。
v-bind绑定一些常用属性
如下,这样就将页面中链接的地址绑定到了“url”上,图片的地址绑定到了“imgUrl”上。
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
</div>
<script>
const vm=new Vue({
el:'#app',
data:{
url:'https://www.baidu.com',
imgUrl:''
}
})
</script>
v-bind绑定class
1、对象语法
可以给v-bind:class设置一个对象来动态的切换class,如下,注意下面的:class等同于v-bind:class,是一个语法缩写形式。
<div id="app">
<div :class="{'FirstDiv':isActive}"></div>