文档章节

初始Vue- Vue.js条件渲染

wshining
 wshining
发布于 2017/08/29 10:30
字数 551
阅读 17
收藏 0

Vue.js条件渲染

1、 v-if

  • v-if是真实的条件渲染,它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。有更高的切换消耗。
  • v-show只是简单地基于 CSS 切换。 有更高的初始渲染消耗。
  • 需要频繁切换用v-show,如果在运行时条件不大可能改变用v-if。

2、v-for

使用 v-for 指令基于一个数组渲染一个列表

<ul id="demo"><li v-for="item in items">{{ item.message }}</li></ul>
----------------------------------------------------
var demo = new Vue({
  el: '#demo',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

从1.0.17开始可以使用of分隔符,更接近JavaScript遍历器语法:

<div v-for="item of items"></div>

3、template v-for

类似于 template v-if,也可以将 v-for 用在 <template> 标签上,以渲染一个包含多个元素的块。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

4、变异方法

  • push()/pop()
  • shift()/unshift()
  • splice()
  • sort()/reverse()

5、替换数组

不会修改原始数组而是返回一个新数组的非变异方法,直接用新数组替换旧数组:

demo.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/);
})

注: filter()/concat()/slice()

6、track-by

用全新对象替换数组,使用track-by特性给Vue.js提示,以尽可能地复用已有实例。

{items: [
    { _uid: ‘88f869d’, ... }, { _uid: ‘7496c10’, ... }
]}

<div v-for="item in items" track-by="_uid">
    <!-- content -->
</div>

7、track-by $index

  • 使用track-by="$index"强制让v-for进入原位更新模式;
  • 片断不会被移动,而是简单地以对应索引的新值刷新;
  • DOM节点不再映射数组元素顺序的改变,不能同步临时状态以及组件的私有状态;
  • Vue.js扩展了观察数组,为它添加了一个$set()方法;
  • Vue.js也为观察数组添加了$remove()方法,用于从目标数组中查找并删除元素,在内部自动调用splice()。

8、显示过滤/排序的结果

  • 想要显示过滤/排序过的数组,同时不实际修改或重置原始数据。有两个办法:
    1.创建一个计算属性,返回过滤/排序过的数组;
    2.使用内置的过滤器 filterBy 和 orderBy。

  • 计算属性有更好的控制力,也更灵活,因为它是全功能 JavaScript。但是通常过滤器更方便。

© 著作权归作者所有

共有 人打赏支持
wshining
粉丝 14
博文 65
码字总数 41723
作品 0
深圳
前端工程师
vue-cli 实战中遇到的`坑`

也可能是因为接触vue时间也不长,经常落入不知名的‘坑’中,对于我这个菜鸟来说,每次‘落坑’无疑是一场不小的灾难。前两天有个朋友在问我,在使用中有没有遇到一些很难解决的问题,一下我...

Christine
2017/11/27
0
0
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
05/20
0
0
Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。 一个 Vu...

逝岁月
04/18
0
0
Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区
05/22
0
0
Vue.js 2.0源码解析之前端渲染篇

在这篇文章中: 一、前言 二、Vue的初始化 三、Vue的渲染逻辑——Render函数 四、Vue的渲染逻辑——VNode对象&patch方法 五、Vue的渲染小结 一、前言 Vue.js框架是目前比较火的MVVM框架之一,...

王鹤
2017/06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

71.告警系统主脚本 配置文件 监控项目

20.20 告警系统主脚本(main.sh) 20.21 告警系统配置文件 20.22 告警系统监控项目 20.20 告警系统主脚本(main.sh): ~1.约定:把以后所有的shell脚本放在/usr/local/sbin下,也方便我们查...

王鑫linux
29分钟前
0
0
装饰者模式

装饰者模式 Q:何为装饰模式? ()地给一个对象添加一些额外的(),并且()时,并不影响原对象。扩展功能来说,装饰器模式相比生成子类更为灵活。 Q:使用场景? 1.想要在不影响其他对象的情况下...

阿元
50分钟前
0
0
GO 切片(slice)相关语法

package mainimport("fmt")func main() {var intArr [5]int = [...]int{1,2,3,4,5} //定义一个数组slice := intArr[2:4] //第二个(包含)下标到第四个下标(不包含)fmt.Println...

汤汤圆圆
51分钟前
0
0
活动招募 HUAWEI HiAI公开课·北京站-如何在4小时把你的APP变身AI应用

人工智能和机器学习是全球关注的新趋势,也是当前最火爆、最流行的话题。当你拿手机用语音助手帮你点外卖,智能推荐帮你把周边美食一网打尽;当你拿起P20拍照时,它将自动识别场景进行最美优...

华为终端开放实验室
今天
1
0
匹配两位小数,js正则

var regex = /^\d*(\.[1-9]|\.\d[1-9])*$/ console.log(1.2,regex.test(1.2)); console.log(0.3,regex.test(0.3)); console.log(1.03,regex.test(1.03)); ......

微信小程序-暗潮
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部