iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

網頁前端基礎&Vue.js系列 第 28

Vue.js指令(v-bind)綁定(DAY28)

  • v-bind(屬性綁定)

之前所介紹的,若想在html動態的呈現資料可以使用{{ }},但如果今天想動態的更換html中的屬性呢?是不是也能在屬性中使用{{ }},像是:<img src=”{{imgsrc}}”>,是否也能正常跑出照片呢?答案是不行的!因為這種語法無法被套用在屬性中。所以今天提供了v-bind屬性,能夠動態輸出HTML元素上的屬性,例如:id、class、style、href、imgSrc、自定義屬性等

v-bind 指令的使用方法: v-bind:屬性名稱

接下來實例操作一下用v-bind來綁定呈現圖片、連結和style樣式吧!


Example

https://ithelp.ithome.com.tw/upload/images/20211010/20140225nbR11XKRVu.png

<div id="app">
    <h1 v-bind:style="{color:activecolor}">welcome</h1>
    <a v-bind:href="url">Click me to google</a>
    <img v-bind:src="imgsrc">
</div>  
<script>
var app = new Vue({
    el:'#app',
    data:{
        url:"https://www.google.com.tw/?hl=zh_TW",
        imgsrc:"http://photos1.blogger.com/blogger/6857/1451/320/James.Pond.1.jpg",
        activecolor:"green"
    }
});
</script>

圖片來源:http://photos1.blogger.com/blogger/6857/1451/320/James.Pond.1.jpg
這樣就能綁定成功,而要更改html的class等屬性來操控style也可以使用V-bind!以後要更改html中的屬性時,可以更加精確的從vue實體中更改就行。這個指令也提供了縮寫的方式,像是<a :href="url">,更加簡潔。

結語

下一篇將會介紹vue指令:v-on!


上一篇
Vue.js指令(v-model)綁定(DAY27)
下一篇
Vue.js指令(v-on)綁定(DAY29)
系列文
網頁前端基礎&Vue.js30

尚未有邦友留言

立即登入留言