vue的for循環(huán)使用方法
更新時間：2019年02月12日 11:21:29 投稿：laozhang
在本篇文章里小編給大家整理了關于vue的for循環(huán)使用方法和步驟，有需要的朋友們跟著學習下。
vue是一套當下非常受歡迎的構建用戶界面的漸進式框架。那如何使用vue進行數(shù)據(jù)循環(huán)呢？下面的案例將使用v-for循環(huán)進行數(shù)據(jù)的遍歷。
1、打開html開發(fā)工具，新建一個html 代碼頁面。
2、在新建的html代碼頁面創(chuàng)建一個<ul>標簽同時給這個標簽設置一個id為app，然后在<ul>里創(chuàng)建一個<li>標簽。
代碼：
<ul id="app">
<li></li>
</ul>
3、引入vue.js。在<body>結束標簽前面引入下載好的vue.js文件。
4、創(chuàng)建vue實例。在引入的vue.js文件后面新建一個<script>標簽，然后在這個標簽里使用new Vue()創(chuàng)建vue實例，并設置一個數(shù)組為 sites。
代碼：
<script>
var app = new Vue({
el:"#app",
data:{
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
5、使用v-for循環(huán)。在<li>標簽上添加 v-for="site in sites"，然后使用{{site.name}}進行遍歷數(shù)組的打印。
<li>代碼：<li v-for="site in sites"> {{site.name}}</li>
6、保存html代碼后使用瀏覽器打開，即可看到瀏覽器頁面上打印出用戶名，表示vue的循環(huán)遍歷已經(jīng)使用成功。
7、所有代碼?？梢灾苯訌椭扑写a，粘貼到新建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所有代碼?？梢灾苯訌椭扑写a，粘貼到新建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>
相關文章
vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決
在前端發(fā)出Ajax請求的時候,有時候會產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關于vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost的解決辦法,需要的朋友可以參考下2023-01-01
vue是一種輕巧便捷的框架，那么如何進行對于數(shù)據(jù)加載的刷新呢？以下就是我對于vue.js數(shù)據(jù)加載的一點想法2017-06-06
vue-router實現(xiàn)tab標簽頁（單頁面）詳解
這篇文章主要為大家詳細介紹了vue-router實現(xiàn)tab標簽頁的相關方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
最近項目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關于el-popover如何通過js手動控制彈出框顯示、隱藏的相關資料,需要的朋友可以參考下2023-12-12
今天在移動端項目中遇見一個需求,需要數(shù)據(jù)無限滾動,所以下面這篇文章主要給大家介紹了關于手寫vue無限滾動指令的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關綁定的data屬性,也會在更新data綁定屬性時候,更新頁面上輸入控件的值,這篇文章主要介紹了Vue之v-model的使用,需要的朋友可以參考下2025-04-04
watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數(shù)據(jù)發(fā)生變化的時候,所有依賴這個數(shù)據(jù)的相關數(shù)據(jù)會自動發(fā)生變化,即自動調用相關的函數(shù),來實現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2023-02-02
??Vuex?是一個專為?Vue.js?應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)。本文會通過一些簡單的示例，為大家詳細講解Vuex的使用，感興趣的小伙伴可以跟隨小編一起學習一下2022-11-11
本文主要介紹了vue中對接Graphql接口的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了從零開始搭建vue移動端項目到上線的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10