码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-11-26 17:15:30      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:smo   过滤   学习   dex   script   自定义   white   笔记一   自定义组件   

#,过滤器
    #,在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>






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

标签:smo   过滤   学习   dex   script   自定义   white   笔记一   自定义组件   

原文地址:http://www.cnblogs.com/strinkbug/p/6104297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!