文档章节

初始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。但是通常过滤器更方便。

© 著作权归作者所有

共有 人打赏支持
上一篇: vue组件开发
下一篇: 初识Vue.js
wshining
粉丝 14
博文 69
码字总数 47017
作品 0
深圳
前端工程师
私信 提问
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
11/28
0
0
前端与移动开发之vue-day1(3)

迭代数组 迭代对象中的属性 迭代数字 2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果...

czbkzmj
11/14
0
0
浅析Vue.js 中的条件渲染指令

1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。 html: <div id="app"><p v-if="type===1">拌面</p><p v-else-if="type===2">扁肉......

开元中国2015
12/11
0
0
Vue 入门之项目目录结构介绍

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

code_xzh
05/20
0
0
人人都能懂的Vue源码系列(二)—Vue构造函数

上篇博文中说到Vue源码的目录结构是什么样的,每个目录的作用应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象,所以我们在这个目录下去寻找Vue构造函数。果然找到了Vue构...

淼淼真人
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

linux-tao
19分钟前
2
0
MySQL: Starting MySQL….. ERROR! The server quit without updating PID file

前段时间打包了一个数据库镜像,但是启动容器之后发现报错 ··· ··· MySQL: Starting MySQL….. ERROR! The server quit without updating PID file 查了网络上的解决方案比较全,遂转帖...

blackfoxya
20分钟前
0
0
C4C销售订单行项目价格维护方法

需求很简单,能够创建销售订单,在行项目里添加产品,带出价格来,同时把总价显示在销售订单抬头区域。 如下图所示: 下面是具体配置。 Business Configuration里,点击Sales Order的配置: ...

JerryWang_SAP
今天
12
0
deepin中配置robot framework环境

本文永久更新地址:https://my.oschina.net/bysu/blog/2989005 【若要到岸,请摇船:开源中国 不最醉不龟归】 1.在终端中输入pip,回车,如果提示没有该命令,则先安转pip sudo apt-get inst...

不最醉不龟归
今天
10
0
OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
今天
244
5

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部