快捷導(dǎo)航

vue.js聲明式渲染和條件與循環(huán)基礎(chǔ)知識(shí)

更新時(shí)間：2017年07月31日 17:07:24 作者：acatlooklikegod

這篇文章主要為大家詳細(xì)介紹了vue.js聲明式渲染和條件與循環(huán)的基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

綁定 DOM 元素文本值

html代碼：

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

JavaScript代碼：

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

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

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

綁定 DOM 元素屬性

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

html代碼：

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

JavaScript代碼：

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

運(yùn)行結(jié)果：

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

條件

用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
 }
})

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

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

循環(huán)

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

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)建激動(dòng)人心的代碼' }
 ]
 }
})

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: