當(dāng)前位置：
首頁 >
【学习笔记】Vue的动态循环插入v-for
發(fā)布時(shí)間：2025/5/22
166
豆豆
生活随笔
收集整理的這篇文章主要介紹了
【学习笔记】Vue的动态循环插入v-for
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
例子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>test</title><script src="vue.js"></script> </head> <body> // 創(chuàng)建表格<div id="test"><table border="1"><thead><tr><td>編號(hào)</td><td>書名</td><td>作者</td></tr></thead><tbody >// 三列，循環(huán)插入數(shù)值。<tr v-for="(book,index) in books"><td>{{index + 1 }}</td><td>{{book.title}}</td><td>{{book.author}}</td></tr></tbody></table></div><script>// 創(chuàng)建Vue。new Vue({el:"#test",data:{books:[{title:'三國(guó)演義',author:'羅貫中'},{title:'水滸傳',author:'施耐庵'},{title:'西游記',author:'吳承恩'},{title:'紅樓夢(mèng)',author:'曹雪芹',},]}}) </script> </body> </html>結(jié)果如圖:
總結(jié)
以上是生活随笔為你收集整理的【学习笔记】Vue的动态循环插入v-for的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Django将数据映射到Html中的
- 下一篇： vue 传递多行数据_vue 数据传递的