VUE學習四，繫結陣列v-for
阿新 • • 發佈：2021-07-07
v-for指令可以繫結陣列的資料來渲染一個專案列表：
一、示範程式碼
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text:'整個牛專案' } ] } })
二、效果如下圖
三、控制檯，輸入app4.todos.push({ text: '新專案' })，列表最後會新增一個新專案
四、全部程式碼參考
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE簡單示範</title> <script type="text/javascript" src="../js/vue.min.js"View Codecharset="utf-8"></script> </head> <body> <!--v-for 指令可以繫結陣列的資料來渲染一個專案列表//--> <!--控制檯，輸入 app4.todos.push({ text: '新專案' })，你會發現列表最後添加了一個新專案。//--> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script> var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛專案' } ] } }) </script> </body> </html>
本文參考：
https://cn.vuejs.org/v2/guide/