Fork me on GitHub

Vue列表渲染

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>

 

posted @ 2016-09-05 14:14  半亩花田  阅读(1429)  评论(0)  编辑  收藏  举报