iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
0
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 13

Day13 指令大全:v-bind

#v-bind

此指令主要用在屬性綁定,常透過綁定一個變量的屬性來滿足動態的效果,變化形式很多種,例如:動態的class、style、href,父元件往子元件綁定屬性、綁定計算屬性等等...

語法: v-bind:屬性名="變量名"
縮寫: :屬性名="變量名"

<a v-bind:href="websiteURL">官方網站</a>
// code...
data (){
    return {
        websiteURL: 'https://ithelp.ithome.com.tw/'
    }
},

##以class為例,我們來操控變量名,你可以直接綁定寫成物件格式

<template>
    <div class="base" v-bind:class="{ success: isSuccess, danger: isError }">
        {{ msg }}
    </div>
</template>
<script>
export default {
    data (){
        return {
            msg: 'HelloWorld',
            isSuccess: true,
            isError: false
        }
    }
    //code...
}
</script>

最終渲染成<div class="base success">HelloWorld</div>

##也可以綁定物件變數

//code...
<div class="base" v-bind:class="msgClass">
    {{ msg }}
</div>
//code...
data (){
    return {
        msg: 'HelloWorld',
        msgClass: {
            success: false,
            danger: true
        }
    }
}
//code...

最終渲染成<div class="base danger">HelloWorld</div>

##甚至於寫成計算屬性返回一個物件

//code...
<div class="base" v-bind:class="msgClass">
    {{ msg }}
</div>
//code...
data (){
    return {
        msg: 'HelloWorld',
        apiCall: true,
        error: null
    }
},
computed: {
    msgClass () {
        return {
          success: this.apiCall && !this.error,
          danger: this.error && this.error.code > 200 
        }
    }
}
//code...

最終渲染成<div class="base success">HelloWorld</div>


##也可以綁定一個陣列格式

<div v-bind:class="[successClass, errorClass]"></div>
//code..
data () {
    return {
        successClass: 'success',
        errorClass: 'danger'
    }
}
//code...

最終渲染成<div class="success danger"></div>

##在陣列裡面放三元運算式

<div v-bind:class="[isSuccess ? success : danger, base]"></div>

##甚至於你可以在陣列語法理面使用物件語法

<div v-bind:class="[{ success: isSuccess }, base]"></div>

同理可以用在style,就不再多做描述。


上面教的是操控變量名,我們也可以改變屬性名,來達到動態屬性

<a v-bind:[attributeName]="url"> ... </a>
//coed..
data () {
    return {
        attributeName: 'href'
    }
}

同理可以用在 v-on 指令上

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day12 指令大全:v-if、v-for
下一篇
Day14 指令大全 v-on
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30

尚未有邦友留言

立即登入留言