Vue?數(shù)據(jù)綁定事件綁定樣式綁定語(yǔ)法示例

更新時(shí)間：2023年07月21日 10:48:36 作者：104828720

這篇文章主要為大家介紹了Vue?數(shù)據(jù)綁定事件綁定樣式綁定語(yǔ)法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

數(shù)據(jù)綁定

DOM內(nèi)容綁定

插值表達(dá)式

注意事項(xiàng)

1、插值表達(dá)式可以使用簡(jiǎn)單的運(yùn)算，例如三目運(yùn)算、字符串拼接、算術(shù)運(yùn)算
2、插值表達(dá)式可以調(diào)用函數(shù)，例如：{{ fn() }}
3、復(fù)雜的計(jì)算或者數(shù)據(jù)處理，應(yīng)該使用計(jì)算屬性或者函數(shù)

插值表達(dá)式的問(wèn)題

1、會(huì)閃動(dòng) （解決方案使用v-cloak或者v-text替代插值表達(dá)式）

v-text

與插值表達(dá)式作用一樣，但寫(xiě)在標(biāo)簽屬性的位置

<div v-text="msg"></div>

強(qiáng)烈推薦使用v-text取代插值表達(dá)式

v-html

此指令有安全隱患，所以只能用于自己的內(nèi)部數(shù)據(jù)中，

不能使用在第三方數(shù)據(jù)上

<div v-html="msg"></div>

DOM屬性綁定

v-bind

注意事項(xiàng)
1、響應(yīng)式的
2、支持動(dòng)態(tài)處理屬性
3、有簡(jiǎn)寫(xiě) v-bind:src="xxx" ---> :src="xxx"

事件綁定

v-on

1、有簡(jiǎn)寫(xiě) v-on:clock="onClick" ---> @click="onClick"
2、有2種事件調(diào)用方式
:click="fn(params, $event)"
:click="fn"

樣式綁定

2種樣式綁定方式

1、使用class屬性動(dòng)態(tài)修改

2、使用style屬性動(dòng)態(tài)修改

通過(guò)class綁定樣式

通過(guò)修改class屬性的類名來(lái)更改樣式

對(duì)象寫(xiě)法

// key就是類名
<view class="box" :class="{'bg-red': isRed}"></view>
export default {
    data() {
        return {
            title: 'Hello',
            isRed: true
        }
    },
    methods: {
        changeColor(){
            this.isRed = !this.isRed;
        }
    }
}

數(shù)組寫(xiě)法

// 數(shù)組元素變量對(duì)應(yīng)的值就是類名
<view class="box" :class="[errorClass,activeClass]"></view>
export default {
    data() {
        return {
            errorClass: 'error',
            activeClass: 'active
        }
    },
    methods: {
        changeColor(){
            this.errorClass = '';
        }
    }
}

注意事項(xiàng)

//1、對(duì)象與數(shù)組可以混合使用（數(shù)組包對(duì)象）
//2、如果有多個(gè)class類名，寫(xiě)法如何更加優(yōu)雅？（推薦）
<view class="box" :class="objClass"></view>
export default {
    data() {
        return {
            objClass: {
                active: true,
                error: false
            }
        }
    },
    methods: {
        changeColor(){
            this.isRed = !this.isRed;
        }
    }
}
//3、默認(rèn)類名如何處理
<view class="box" :class="[errorClass,activeClass]"></view>