iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

Vue菜鳥的自我學習days系列 第 8

8.Data-binding

  • 分享至 

  • xImage
  •  

ViewModel to View
在 Vue App 裡,透過使用雙大括號 {{}} (Mustache) 進行資料綁定,當 Vue 在 mount 階段時,即會將 {{}}
取代為 data 中設定的資料內容,如下

<div>{{ message }}</div>

若要針對 attribute 來綁定,如下

<div v-bind:class="dynamicClass">text</div>
<div v-bind:title="message">this is message</div>

當 data 中的屬性值變更時,頁面上對應的資料也會即時重新渲染
注意:若在 mount 階段沒有綁定的 data 屬性,之後更改這些屬性值,頁面也不會即時重新渲染,因此要在 data
定義時就要加入屬性,若剛開始沒有值可以指定,可以用給定初始值的方式賦值

new Vue('example', {
data: function() {
    return {
        message: '',
        size: 0
        }
    }
});

上一篇
7.Components2
下一篇
9.Data Binding2
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言