v-bind
1. v-bind基本使用
v-bind
用于绑定数据和元素属性,可以使用:
简写
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf"></a>
<!-- 语法糖写法 -->
<img :src="imgURL" alt="">
<a :href="aHerf"></a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
aHerf:"http://www.baidu.com"
}
})
</script>
2. v-bind动态绑定class
- 对象语法
通过v-bind
指令可以为DOM元素动态绑定class
比如给<h2>
标签动态添加一个class = active
,activ