vue.js渲染與循環知識講解

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

vue.js宣告式渲染與條件與循環的具體內容，分享給大家

綁定DOM 元素文字值

html程式碼：

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

JavaScript程式碼：

##

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

執行結果：Hello Vue!

##總結：

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

綁定DOM 元素屬性

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

html程式碼：

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>

JavaScript程式碼：

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

執行結果：

總結：

v-bind 屬性稱為指令，是由Vue 提供的專用屬性，指令的作用是：「將此元素的title 屬性與Vue 實例的message 屬性保持關聯更新」。當我們改變app2.message的值時，綁定了title屬性的元素會進行更新。

條件

用v-if指令判斷條件

html程式碼：

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

JavaScript程式碼：

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

執行結果：你可以看到我

總結：

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

v-for 指令，可以使用陣列中的資料來展示一個項目清單

html程式碼：

##

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

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的程式碼量

以上是vue.js渲染與循環知識講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！