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。

上述就是小編為大家分享的vue.js中怎么實現聲明式渲染了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。