文档章节

初始Vue- Vue.js条件渲染

wshining
 wshining
发布于 2017/08/29 10:30
字数 551
阅读 17
收藏 0
点赞 0
评论 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
博文 64
码字总数 41353
作品 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 实战 (一) -- Vue 基础总结

Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面: 1.数据绑定 2.指令 3.组件 4.事件 5.过滤器 Vue基础 Vue实例 构造器 通...

小和子茶
07/17
0
0
人人都能懂的Vue源码系列(二)—Vue构造函数

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

淼淼真人
05/21
0
0
前端框架之Vue.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
keep-alive:组件级缓存

title: keep-alive组件 date: 2018-06-11 09:13:26 tags: keep-alive Vue vue-router 页面缓存 在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的...

大肥凯
07/09
0
0
Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh
05/14
0
0
【Vue笔记】-- 详解vue生命周期

引言:   前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的理解。 正文: 首先上初始化代码(代码不完整,完整代码在下...

热爱前端的17号诶
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mybatis中session.getMapper方法源码分析

0开始代码AuthorMapper mapper = session.getMapper(AuthorMapper.class); 1 DefaultSqlSession类 @Override public <T> T getMapper(Class<T> type) { //最后会去调用MapperRegistry.getMap......

writeademo
6分钟前
0
0
spring cloud zuul网关的作用

zuul一般有两大作用,1是类似于Nginx的网址重定向,但zuul的重定向的一般是整个spring cloud里在Eureka注册中心的模块. zuul: ignored-services: '*' sensitiveHeaders: routes: ...

算法之名
6分钟前
2
0
java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
16分钟前
0
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
18分钟前
0
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
21分钟前
0
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
23分钟前
0
0
javascript前端AES加密解密

参考了一下网上的代码加上自已的一些想法,修改,key也可以是中文, 要引入一个aes.js的js文件。 html代码 <html> <head> <title>AES加解密</title> <meta http-equiv="Content-Type"......

oisan_
27分钟前
0
0
MacOS和Linux内核的区别

有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我们来看...

六库科技
31分钟前
0
0
Vue.js-自定义事件例子

自定义组件的 v-model 2.2.0+ 新增 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。m...

tianyawhl
34分钟前
0
0
RobotThread.cpp

#include "RobotThread.h"RobotThread::RobotThread(int argc, char** pArgv, const char * topic) :m_Init_argc(argc), m_pInit_argv(pArgv), m_topic(topic){/** ......

itfanr
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部