vue v-for遍歷多種使用方式
小編:管理員 95閱讀 2022.08.18
(1)v-for遍歷數組獲取數組的item對象的value
采用v-for對數組進行遍歷
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!DOCTYPE html> <head> <title>test</title> <script type="text/javascript" src="../../node_modules/vue/dist/vue.js" ></script> </head> <body> <div id="app"> <ul> <li v-for="item in names">{{item}}</li> </ul> </div> <script type="text/javascript"> const app = new Vue({ el: "#app", data: { names: ["james", "curry", "lotus"], }, methods: {}, }); </script> <style></style> </body>復制(2)v-for遍歷數組獲取數組的item和key
<ul>
<li v-for="(item,key) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
</li>
</ul>
<!DOCTYPE html> <head> <title>test</title> <script type="text/javascript" src="../../node_modules/vue/dist/vue.js" ></script> </head> <body> <div id="app"> <ul> <li v-for="(item,key) in names"> <a>item是{{item}}</a> <a>key是{{key}}</a> </li> </ul> </div> <script type="text/javascript"> const app = new Vue({ el: "#app", data: { names: [{"Letter":"A"}, {"Letter":"B"}, {"Letter":"C"}], }, methods: {}, }); </script> <style></style> </body>復制(3)對象遍歷,v-for也可以對單個對象進行遍歷
<ul>
<li v-for="(item,key,index) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
<a>index是{{index}}</a>
</li>
</ul>
<!DOCTYPE html> <head> <title>test</title> <script type="text/javascript" src="../../node_modules/vue/dist/vue.js" ></script> </head> <body> <div id="app"> <ul> <li v-for="(item,key,index) in names"> <a>item是{{item}}</a> <a>key是{{key}}</a> <a>index是{{index}}</a> </li> </ul> </div> <script type="text/javascript"> const app = new Vue({ el: "#app", data: { names: {"LetterA":"A","LetterB":"B","LetterC":"C"}, }, methods: {}, }); </script> <style></style> </body>復制
相關推薦
- Vue3(二)工程化開發方式做項目 工程化的開發方式這是開發中、大型項目的必備技能,網上資料也很多,這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等?梢院蜕弦黄腸nd方式做項目做一下對比。node.js,npm、cnpm、yarnnode.js執行 npm run serve ,…
- Hibernate Criterion 在查詢方法設計上能夠靈活的依據Criteria的特點來方便地進行查詢條件的組裝.Hibernate設計了CriteriaSpecification作為Criteria的父接口,以下提供了Criteria和DetachedCriteria.Criteria和DetachedCriteria的主要差別在于創建的形式不一樣,Criteria是在線的,所…