【学习笔记】Vue的动态循环插入v-for
生活随笔
收集整理的這篇文章主要介紹了
【学习笔记】Vue的动态循环插入v-for
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
例子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>test</title><script src="vue.js"></script> </head> <body> // 創建表格<div id="test"><table border="1"><thead><tr><td>編號</td><td>書名</td><td>作者</td></tr></thead><tbody >// 三列，循環插入數值。<tr v-for="(book,index) in books"><td>{{index + 1 }}</td><td>{{book.title}}</td><td>{{book.author}}</td></tr></tbody></table></div><script>// 創建Vue。new Vue({el:"#test",data:{books:[{title:'三國演義',author:'羅貫中'},{title:'水滸傳',author:'施耐庵'},{title:'西游記',author:'吳承恩'},{title:'紅樓夢',author:'曹雪芹',},]}}) </script> </body> </html>結果如圖:
總結
以上是生活随笔為你收集整理的【学习笔记】Vue的动态循环插入v-for的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Django将数据映射到Html中的
- 下一篇： html5倒计时秒杀怎么做,vue 设