vue.js聲明式渲染和條件與迴圈基礎知識，vue.js基礎知識

vue.js聲明式渲染和條件與迴圈基礎知識，vue.js基礎知識

vue.js聲明式渲染和條件與迴圈的具體內容，分享給大家

綁定 DOM 元素文本值

html代碼：

<div id="app"> {{ message }}</div>

JavaScript代碼：

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})

運行結果：Hello Vue!

總結：資料和 DOM 已經被關聯在一起，當我們改變app.message的資料，所渲染的的DOM元素會相應地更新。

綁定 DOM 元素屬性

用v-bind指令綁定span元素的title屬性

html代碼：

<div id="app-2"> <span v-bind:title="message"> 滑鼠移至上方此處幾秒， 可以看到此處動態綁定的 title！ </span></div>

JavaScript代碼：

var app2 = new Vue({ el: '#app-2', data: { message: '頁面載入於 ' + new Date() }})

運行結果：

總結：v-bind 屬性被稱為指令，是由 Vue 提供的專用屬性，該指令的作用就是：“將此元素的 title 屬性與 Vue 執行個體的 message 屬性保持關聯更新”。當我們改變app2.message的值時，綁定了title屬性的元素會進行更新。

條件

用v-if指令判斷條件

html代碼：

<div id="app-3"> <p v-if="seen">現在你可以看到我</p></div>

JavaScript代碼：

var app3 = new Vue({ el: '#app-3', data: { seen: true }})

運行結果：你可以看到我

總結：當我們把app3.seen的值改為false以後，我們會看到 span 消失。說明我們不只是可以將資料繫結到文本和屬性，也可以將資料繫結到 DOM 結構。從而通過資料的更改實現元素的插入/更新/刪除操作。

迴圈

v-for 指令，可以使用數組中的資料來展示一個項目列表

html代碼：

<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div>

JavaScript代碼：

var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '建立激動人心的代碼' } ] }})

運行結果：1.學習 JavaScript
2.學習 Vue
3.建立激動人心的代碼

在控制台，輸入 app4.todos.push({ text: ‘新的 item' })，你會看到列表中追加了一個新的 item。
總結：可以通過資料確定我們項目列表的長度和內容，從而減少了html的代碼量

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。