v-for列表渲染
阿新 • • 發佈：2017-10-08
char 處理 倒數 ren sts 刪除 foo html 單個
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染v-for</title> </head> <body> <ul id="box"> <li v-for="item in items"> 可以寫成比較像js原生語法：v-for="item of items" {{item.message}} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ items:[ {message:‘foo‘}, {message:‘bar‘} ] } }) </script> </html>--> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染v-for</title> </head> <body> <ul id="box"> <li v-for="(item,index) in items"> {{parentMessage}}-{{index}}-{{item.message}} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ parentMessage: ‘Parent‘, items:[ {message:‘foo‘}, {message:‘bar‘} ] //數組裏面包含多個對象 } }) </script> </html>--> <!-- 用v-for來循環對象的屬性 --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用v-for來循環對象的屬性</title> </head> <body> <ul id="box" class="demo"> <li v-for="value in object" v-bind:style="style"> {{ value }} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ object:{ FirstName:‘John‘, LastName:‘Doe‘, Age:25 //v-for不僅可以用來循環對象集合，也可以用來循環單個對象中的多個屬性值； }, style:{ listStyle:‘none‘ } } }) </script> </html>--> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用v-for來循環對象的屬性</title> </head> <body> <ul id="box" class="demo"> <li v-for="(value, key, index) in object" v-bind:style="style"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ object:{ FirstName:‘John‘, LastName:‘Doe‘, Age:25 }, style:{ listStyle:‘none‘ } } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用v-for來循環對象的屬性</title> </head> <body> <ul id="box" class="demo"> <li v-for="n in 10" v-bind:style="style"> {{ n }} 循環若幹次數，並不需要處理循環數據，那麽，還是v-for可以勝任。 </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#box‘, data:{ } }) </script> </html> 結果<12345678910--> <!-- push() //在結尾增加一條或多條數據 pop() //刪除最後一條數據 shift() //刪除第一條數據，並返回這條數據 unshift() //在開始增加一條或多條數據，並返回數組長度 splice() //向/從數組中添加/刪除項目，然後返回被刪除的項目。 sort() //對數組的元素進行排序。 reverse() //顛倒數組中元素的順序。 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染v-for</title> </head> <body> <ul id="box"> <li v-for="item in items"> <!-- 可以寫成比較像js原生語法：v-for="item of items" --> {{item.message}} </li> </ul> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var obj=new Vue({ el:‘#box‘, data:{ items:[ {message:‘foo‘},s {message:‘bar‘} ], }, vm.items.push({ message: ‘Baz‘ }), }) </script> </html>
v-for列表渲染