简介
- v-bind用来响应的更新html属性
- v-bind:href 可以简写成 :href
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
- v-bind可以直接绑定三元表达式
绑定属性
<!-- target="_blank" 让跳转的窗口新建打开而不是在原页面跳转 -->
<!-- <a v-bind:href="linkAddress" v-text="title" target="_blank"></a> -->
<!-- <a :href="linkAddress" v-text="title" target="_blank"></a> -->
<a :href="isFlag?bd:qq" v-text="isFlag?'百度':'腾讯'" target="_blank"></a>
<a :href="isFlag?bd:qq" v-text="isFlag?'百度':'腾讯'" target="_blank"></a>
<input type="button" @click="updateLink" value="点我会变喔">
const app = new Vue({
el: '.app',
data: {
// linkAddress: 'http://www.baidu.com',
// title: '百度'
isFlag: true,
bd: 'http://www.baidu.com',
qq: 'http://www.qq.com',
},
methods: {
updateLink() {
// this.linkAddress = 'http://www.qq.com'
// this.title = '腾讯'
this.isFlag = !this.isFlag
}
}
})
点击切换
绑定对象
切换类名：我们可以给v-bind:class 一个对象，以动态地切换class
注意：v-bind:class指令可以与普通的class特性共存
v-bind 中支持绑定一个对象
如果绑定的是一个对象，则键为对应的类名 ；值为对应data中的数据
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
<li>Vue</li>
<li>Node</li>
<li>React</li>
</ul>
绑定数组（class）
v-bind中支持绑定一个数组：数组中classA和classB对应为data中的数据
<ul class="box" :class="[classA, classB]">
<li>Vue</li>
<li>Node</li>
<li>React</li>
</ul>
这里的classA =对应=> data中的classA
这里的classB =对应=> data中的classB
绑定样式（style）
给style行内添加对象样式
<div :style="styleObj1">绑定样式对象</div>
data:{
styleObj1:{
color: 'pink',
fonstSize: '30px',
background: 'black'
}
}
<div :style="{ color: activeColor, fontSize: fontSize, background: 'red' }">内联样式</div>
<!-- 数组语法可以将多个样式对象应用到同一个元素 -->
<div :style="[styleObj1, styleObj2]"></div>
