Vue2——v-bind

简介

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>