你的位置:首页 > Java教程

[Java教程]Vue列表渲染

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/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>