iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

少年學Vue,如隙中窺月系列 第 8

[Day8] 動態屬性指令(v-bind)

  • 分享至 

  • xImage
  •  

錯誤方式

如果我們想將資料加進 html 屬性值,比如 imgsrc 中,可能會嘗試使用下列語法,但卻會發生錯誤。打開 console 它要我們使用 v-bind 的指令。

<body>
    <div class="app">
        <img src="{{url}}" alt="">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            url:'https://i.imgur.com/S0wWwee.jpg',
        }
    });
</script>

https://i.imgur.com/UigNa34.png

使用 v-bind

我們將上面的程式碼修改成下面這樣,可以發現圖片就順利跑出來了

<body>
    <div class="app">
        <img v-bind:src="url" alt="">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            url:'https://i.imgur.com/S0wWwee.jpg',
        }
    });
</script>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/10fc2c61-1f91-4eb6-a05a-164056076a99/Untitled.png

動態切換類別樣式

原本我們要在 html 元素上新增類別樣式的語法是 class=" class 樣式名稱",現在我們可以透過 v-bind 來動態加入類別樣式,使用 class = "{ 'class 樣式名稱' : 判斷式}" ,以物件形式傳入樣式名稱還有判斷值,當判斷式為 true 時,代表加入 class 樣式,false 則沒有。加上先前有提到的 checkbox 用法,將判斷式的值透過 v-modelcheckbox 點擊欄位綁定在一起,當按下點擊欄位時判斷式就會自動變成 trueclass 樣式就會套入
https://i.imgur.com/EMkBXVb.png

<body>
    <div class="app">
        <p v-bind:class="{'red':isRed,'bold':isBold}">Hello Vue</p>
        <input type="checkbox" v-model="isRed">紅色
        <input type="checkbox" v-model="isBold">變粗
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            isRed:false,
            isBold:false
        }
    });
</script>
.bold{
    font-weight: bold;
}
.red {
    color:red;
}

上一篇
[Day7] 表單資料綁定
下一篇
[Day9] 操作頁面行為(v-on)
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言