vue.js聲明式渲染和條件與循環(huán)的具體內(nèi)容，分享給大家

綁定 DOM 元素文本值

html代碼：

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

JavaScript代碼：

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

運行結(jié)果：Hello Vue!

總結(jié)：數(shù)據(jù)和 DOM 已經(jīng)被關(guān)聯(lián)在一起，當(dāng)我們改變app.message的數(shù)據(jù)，所渲染的的DOM元素會相應(yīng)地更新。

綁定 DOM 元素屬性

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

html代碼：

<div id="app-2"> <span v-bind:title="message"> 鼠標(biāo)懸停此處幾秒， 可以看到此處動態(tài)綁定的 title！ </span></div>

JavaScript代碼：

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

運行結(jié)果：

總結(jié)：v-bind 屬性被稱為指令，是由 Vue 提供的專用屬性，該指令的作用就是：“將此元素的 title 屬性與 Vue 實例的 message 屬性保持關(guān)聯(lián)更新”。當(dāng)我們改變app2.message的值時，綁定了title屬性的元素會進行更新。

條件

用v-if指令判斷條件

html代碼：

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

JavaScript代碼：

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

運行結(jié)果：你可以看到我

總結(jié)：當(dāng)我們把app3.seen的值改為false以后，我們會看到 span 消失。說明我們不只是可以將數(shù)據(jù)綁定到文本和屬性，也可以將數(shù)據(jù)綁定到 DOM 結(jié)構(gòu)。從而通過數(shù)據(jù)的更改實現(xiàn)元素的插入/更新/刪除操作。

循環(huán)

v-for 指令，可以使用數(shù)組中的數(shù)據(jù)來展示一個項目列表

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: '學(xué)習(xí) JavaScript' }, { text: '學(xué)習(xí) Vue' }, { text: '創(chuàng)建激動人心的代碼' } ] }})

運行結(jié)果：1.學(xué)習(xí) JavaScript
2.學(xué)習(xí) Vue
3.創(chuàng)建激動人心的代碼

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。