溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue是一套當下非常受歡迎的構建用戶界面的漸進式框架。那如何使用vue進行數據循環呢？下面的案例將使用v-for循環進行數據的遍歷。
1、打開html開發工具，新建一個html 代碼頁面。
2、在新建的html代碼頁面創建一個<ul>標簽同時給這個標簽設置一個id為app，然后在<ul>里創建一個<li>標簽。
代碼：
<ul id="app">
<li></li>
</ul>
3、引入vue.js。在<body>結束標簽前面引入下載好的vue.js文件。
4、創建vue實例。在引入的vue.js文件后面新建一個<script>標簽，然后在這個標簽里使用new Vue()創建vue實例，并設置一個數組為 sites。
代碼：
<script>
var app = new Vue({
el:"#app",
data:{
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
5、使用v-for循環。在<li>標簽上添加 v-for="site in sites"，然后使用{{site.name}}進行遍歷數組的打印。
<li>代碼：<li v-for="site in sites"> {{site.name}}</li>
6、保存html代碼后使用瀏覽器打開，即可看到瀏覽器頁面上打印出用戶名，表示vue的循環遍歷已經使用成功。
7、所有代碼。可以直接復制所有代碼，粘貼到新建html文件上，修改vue.js路徑保存后使用瀏覽器打開即可看到效果。所有代碼
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="app"><li v-for="site in sites"> {{site.name}}</li></ul><script type="text/javascript" src="js/vue.js" ></script><script>var app = new Vue({el所有代碼。可以直接復制所有代碼，粘貼到新建html文件上，修改vue.js路徑保存后使用瀏覽器打開即可看到效果。所有代碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="app"><li v-for="site in sites"> {{site.name}}</li></ul><script type="text/javascript" src="js/vue.js" ></script><script>var app = new Vue({el:"#app",data:{sites: [ { name: 'Runoob' }, { name: 'Google' }, { name:
:"#app",data:{sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ]}})</script></body></html>
'Taobao' } ]}})</script></body></html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
