Vue2.0学习笔记一 ：各种表达式

Posted 2020-08-21 一直问

#，过滤器

    #，在Vue2.x中，过滤器只能在mustache绑定中使用，为了在指令帮定中实现同样的行为，你应该使用计算属性；

    #，过滤器可以串联 {{ message | filterA | filterB }}

#，条件渲染

    #，注意v-if与v-show的区别，v-if是决定是否创建DOM，而v-show则是DOM始终存在，只是改变了显示样式；

    #，如果要切换多个元素的时候，我们就使用<template v-if=‘ok‘>；

    #，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

#，列表渲染

    #，<li v-for=‘item in items>{{item.message}}</li>，也可以用of 代替in，这种语法和javascript的语法更加接近；

    #，和v-if类似，如果我们要渲染多个元素，则可以使用 <template v-for=‘item in items> <xxxx> < bbb> </tempate>

    #，用v-for不但可以迭代数组，也可以迭代对象，然后item就表示对象的属性值，当然，也可以像下面这样获取到对象属性的key、value、index；

    <ul>

      <li v-for=‘(value, key, index) in person‘>

        {{key}}, {{value}}, {{index}} 

    </ul>

#，还可以使用v-for迭代取整数；<span v-for="n in 10">{{ n }} </span>

#，可以在自定义组件中使用v-for，此时如果要把v-for的item值传递给子组件，需要用到子组件的prop属性；

#，为了提高在items变化时v-for的渲染效率，我们最好给元素指定一个key，例如：

    <div v-for="item in items" :key="item.id">

  <!-- 内容 -->
</div>

来自为知笔记(Wiz)