zoukankan      html  css  js  c++  java
  • Vue2.0学习笔记一 :各种表达式

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






  • 相关阅读:
    用JS 对JSON 进行“增/改/删”
    工作中发现html label标签的一些特性
    jquery validate插件 验证函数扩展
    jquery live()函数原理及实现
    关于IE背景图片显示100%(背景图片自动伸缩 自适应)
    二维数组排序
    Javascript for循环的疑惑
    JS 输入银行卡号,4位自动加空格
    form提交后reset功能失效
    IE6不支持position:fixed的解决方法
  • 原文地址:https://www.cnblogs.com/strinkbug/p/6104297.html
Copyright © 2011-2022 走看看