vue.js聲明式渲染和條件與循環(huán)基礎知識
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)在一起，當我們改變app.message的數(shù)據(jù)，所渲染的的DOM元素會相應地更新。
綁定 DOM 元素屬性
用v-bind指令綁定span元素的title屬性
html代碼：
<div id="app-2"> <span v-bind:title="message"> 鼠標懸停此處幾秒， 可以看到此處動態(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)更新”。當我們改變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é)：當我們把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: '學習 JavaScript' },
{ text: '學習 Vue' },
{ text: '創(chuàng)建激動人心的代碼' }
]
}
})
運行結(jié)果：1.學習 JavaScript
2.學習 Vue
3.創(chuàng)建激動人心的代碼
在控制臺，輸入 app4.todos.push({ text: ‘新的 item' })，你會看到列表中追加了一個新的 item。
總結(jié)：可以通過數(shù)據(jù)確定我們項目列表的長度和內(nèi)容，從而減少了html的代碼量
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Nuxt使用Vuex的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue實現(xiàn)element表格里表頭信息提示功能(推薦)
小編最近接了這樣一個需求，需要在element表格操作一欄添加提示功能，下面小編給大家?guī)砹嘶趘ue實現(xiàn)element表格里表頭信息提示功能，需要的朋友參考下吧2019-11-11
這篇文章主要為大家介紹了vue2與vue3的生命周期對比，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue中.$mount('#app')手動掛載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細介紹了vue封裝組件之上傳圖片組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來了，大家根據(jù)自身需要選擇，需要的朋友可以參考下2018-09-09
Vue.js 的內(nèi)聯(lián)表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計算屬性，非常不錯，感興趣的的朋友一起看看吧2016-11-11
我們所熟知的Vue.js也在如何提取公共代碼復用方面也一直在探索優(yōu)化，本文小編就來和各位聊聊Vue.js代碼復用的前世今生，希望對大家學習Vue有一定的幫助2023-05-05
這篇文章主要為大家介紹了vuex的五個核心概念和基本使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-09-09
這篇文章主要介紹了vue-ls vue本地儲存的實例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04