gitHub地址:https://github.com/manlili/vue_learn里面lesson09
一 for循环数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul class="test"> <li v-for="item in name"> <!--获取位置第一种写法:$index是vue自带的位置索引--> {{$index}}--{{item.message}} <!--输出0--Foo 1--Bar--> </li> <li v-for="(index,item) in name"> <!--获取位置第二种写法:自定义一个index变量直接跟着item--> {{index}}**{{item.message}} <!--输出0**Foo 1**Bar--> </li> </ul> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { name: [ //注意name是数组 { message: 'Foo' }, { message: 'Bar' } ] } }) </script> </body> </html>
二 for循环对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul class="test"> <li v-for="value in name"> {{$key}}--{{value}} <!--输出是 FirstName--John LastName--Doe Age--30--> </li> </ul> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { name:{ //注意name是对象 FirstName: 'John', LastName: 'Doe', Age: 30 } } }) </script> </body> </html>
三 track-by定义不需重新渲染的DOM片段
功能:有时候数组数据变化,页面所有DOM都需要重新渲染,这样会增加渲染时间,但是track-by可以定义哪些DOM被复用,使Vue.js 因而能尽可能地复用已有实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue列表</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul class="test"> <li v-for="item in name" track-by="id"> <!--然后在替换数组 name 时，如果 Vue.js 遇到一个包含id:'01' 的新对象，vue可以复用这个已有对象的作用域与 DOM 元素。--> {{$index}}--{{item.message}} <!--输出0--Foo 1--Bar--> </li> </ul> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: { name: [ //注意item是数组 { message: 'Foo',id:01 }, { message: 'Bar',id:02 } ] } }) </script> </body> </html>