文档章节

初始Vue- Vue.js条件渲染

wshining
 wshining
发布于 2017/08/29 10:30
字数 551
阅读 18
收藏 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
博文 73
码字总数 50814
作品 0
深圳
前端工程师
私信 提问
Vue基础知识讲解——记一次给后端的培训

[TOC] 这是一份我给公司后端同事培训Vue的培训第一节课技术文档,旨在带领他们入门Vue的开发世界,释放更多的前端资源。现开放出来以求业界各位的技术指点或补充,感谢~ 以下文档配合代码一起...

闲淡超人
03/25
0
0
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

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

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

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

czbkzmj
2018/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
2018/12/11
0
0
Vue 入门之项目目录结构介绍

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

code_xzh
2018/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
今天
43
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
15
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
6
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部