Vue.js列表渲染详解-优快云博客

列表渲染

我们用v-for 来进行列表的渲染操作语法主要是 item in items语法，{{内容为item.message}}，在数据中我们用一个items的数组来包含一个{}的数据。

<div id="app">
    <ul>
        <li v-for="item in items">{{item.message}}</li>
    </ul>
</div>
//JS语法
var app=new Vue({
    el:"#app",
    data:{
        items:[
            {message:1},
            {message:2}
        ]
    }
})

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<div id="app2">
        <ul>
            <li v-for="(item,index) in items">{{item.message}}:{{index}}:{{parent}}</li>
        </ul>
</div>
//JS代码
var app=new Vue({
      el:"#app2",
      data:{
            parent:"ParentMessage",
            items:[
                {message:1},
                {message:2}
            ]
        }
})

结果为:1:0:ParentMessage，2:1:ParentMessage

对象的v-for

  <ul id="app3">
        <li v-for="value in object">{{value}}</li>
  </ul>
//JS代码
  var app3=new Vue({
        el:"#app3",
        data:{
            object:{
                name:"jack",
                age:29,
                job:"engineer"
            }
        }
    });
 //这种方法同样可以得到一个列表，还有就是我们可以使用(value,key,index) in object来输出key和index

Key

当使用key时，必须设置兄弟元素唯一的key，当key排列顺序变化时，兄弟元素会重新排列，而当key的值变化时，这个元素会被重新渲染。就像之前的那个input表单toggle—Email和User的例子

 <div id="app1">
        <template v-if="type==='Email'">
            <label>Email</label>
            <input type="text" placeholder="Enter your Email" key="Email-input">
        </template>
        <template v-if="type==='User'">
            <label>User</label>
            <input type="text" placeholder="Enter your User" key="User-input">
        </template>
        <button @click="{{change()}}">toggle</button>
    </div>
    //在这个例子中，我们如果不使用key，虽然input会被复用，但是文本框中的内容并不会被刷新，而只是简单的替换placehoder属性

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值，

<div id="app" :key="item.id">

</div>

数组方法

当我们在Vue中使用数组方法时，我们要注意了,由于Javascript的限制，Vue无法监测到下列代码对于数组的变化

当我们利用索引设置项时app.items[message]="hello"
解决办法：Vue.set(app.items,itemIndex,newValue)或者app.items.splice(ItemIndex,1,newValue)
当我们设置数组长度的时候vm.items.length=newLength
解决办法：app.items.splice(newLength)

不光是在数组中在对象中，我们不能检测到对象的属性的添加或删除

app.message=2;
//通过这种方法添加的属性并不是响应式的，只有写在data中的属性才是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性，但是我们能通过Vue.set的方式添加响应式属性

Vue.set(object,key,value)
上面的等同于
object.$set(this.property,key,value)

过滤
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

<div id="app">
    <li v-for="number in evenNum">{{number}}</li>
</div>
var app=new Vue({
    el:"#app",
    data:{
        numbers:[1,2,3,4,5,6,7,8]
    },
    computed:{
        evenNum:function(){
            return numbers.filter(function(a){
                    return a%2===0;
                })  
            }
        }
    }
})