vue.js实现条件渲染的实例代码


Posted in Javascript onJune 22, 2017

一、初探条件渲染

vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍:

(1)v-if

<div id="app">
  <div v-if="c1">c1</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});

当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素。渲染结果如下:

<div id="app"></div>

(2)v-else

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else>c1 is not true</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});

当 c1 为真值的时候,渲染 v-if 所绑定的元素,否则渲染 v-else 所绑定的元素。这里值得注意的是,在 Handlebars 模板引擎里面,else 可以和 each 所搭配,当遍历次数为0的时候,则渲染 else 块所对应的内容;而对于 vue,官方给出的说法是,每个 v-else 所绑定语句必须绑定在 v-if 或者 v-else-if 语句的后面。一开始我还抱有一丝希望地去试了一下,结果。。。

vue.js实现条件渲染的实例代码

遍历次数为0的时候,v-else 绑定的元素没有渲染出来,而且控制台还报错了。

个人感觉,在这一方面,vue 的模板引擎可能有所欠缺。虽然说,我们可以利用在循环中添加条件判断实现相同的功能,但却需要添加额外的代码。

(3)v-else-if

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else-if="c2">c2</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false,
    c2: true
  }
});

这里先检查 c1 是否为真值,是则渲染出 v-if 绑定的元素,否则检查 c2 是否为真值,是则渲染出 v-else-if 所绑定的元素。如果 c1 / c2 都不为真值,则都不渲染。渲染结果如下:

<div id="app">
  <div>c2</div>
</div>

不难理解,v-if、 v-else、 v-else-if 跟类 C 语言中的 if、else、else if 功能相仿。

二、条件渲染优化

除了提供跟类 C 语言中的 if、else、else if 相似的功能以外,vue 还为开发者提供了性能优化方案。

(1)v-show

v-show 有着和 v-if 相似而又不同的功能,v-if 依赖于控制 DOM 节点,而 v-show 是依赖于控制 DOM 节点的 display 属性。

<div id="app">
  <div v-show="c4">c4</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c4: false
  }
});

当 v-show 绑定的值为真值的时候,节点正常渲染;当为假值的时候,节点仍旧渲染,但是添加了 style="display:none;",将节点通过 CSS 的方式隐藏。渲染结果如下:

<div id="app">
  <div style="display: none;">c4</div>
</div>

相比于 v-if,v-show 其实不管在什么条件下,一开始都会进行节点的渲染,而后续的状态切换都是基于 CSS 实现的。针对状态需要频繁切换状态的节点,v-show 相对于直接修改 DOM 节点的 v-if 有更好的性能。

然而,v-show 的缺点也是显而易见的,不管初始条件如何,它都将进行 DOM 节点的渲染,这对首屏加载优化不一定是个好事情。

(2)key

在使用 v-if 等指令的时候,vue 会尽可能地复用已经渲染的元素,而不是全部地重头渲染。例如一对绑定 v-if 与 v-else 的元素,如果二者内部 DOM 元素相同,则可能在所绑定数据改变时,只更新绑定了的属性,其它通过用户操作或者 JS 修改了的属性将被保留。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

这里就是如此,点击 toggle 按钮的时候,v-if 所绑定的值会切换,相应的,DOM 节点也会跟着切换,但是实际上,由于 vue 重用了 input 元素,切换的同时,用户填写的内容并没有被清空。同理,label 元素在切换的工程中,其实也只是修改了 for 属性和元素内的文字,并没有销毁原有 DOM 节点和生成新的 DOM节点。

但是 vue 做的这种优化并不总是为人们所需要的,不需要它的时候,我们为这个元素添加一个唯一的 key 值就可以了。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" key="name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" key="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

像这样,为这两个不需要“优化”的 input 元素添加了唯一标识的 key 以后,vue 便不会再复用这两个元素。每次切换之后,修改的内容将不会被保留。

三、更多思考

(1)基于标签的指令(v-bind 、v-if)

Handlebars 的 helpers 有自己独立的语法,比如:

{{#if ok}}
 <h1>Yes</h1>
{{/if}}

它定义了一组自己的语法。而实现同样的功能,vue 使用类似于 v-bind、v-if 之类的指令,它们都是绑定在一个个标签上面的,如

<h1 v-if="ok">Yes</h1>

这样的语法更加简洁、清晰。

Handlebars 的语法,支持同时绑定多个 DOM 节点。

{{#if ok}}
 <h1>Yes</h1>
 <h1>Yes</h1>
 <h1>Yes</h1>
{{/if}}

按照前面的思路,难道 vue 要实现成这样?

<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>

那根本不可能,添加额外的 DOM 节点包裹住它们?那就更不可能。vue 扩展了一个 template 节点,使用的时候,我们可以像 HTML 节点一样去使用它,但是渲染页面的时候,它不会被渲染在页面上。于是,前面的代码可以实现成这样:

<template v-if="ok">
 <h1>Yes</h1>
 <h1>Yes</h1>
 <h1>Yes</h1>
</template>

想想,其实和 Handlebars 也差不多了,甚至显得还要复杂些了,毕竟 template 这个单词这么长~

(2)利用条件渲染字符串

前面说,v-if 等指令都是基于标签的,那如果我不想创建额外的标签,只是想按照条件去修改一个字符串呢?没错,你猜对了,template 节点,它里面除了可以存放节点,也可以直接存放字符串,就像这样:

<div id="app">
  <template v-if="c3">text</template>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c3: true
  }
});

渲染结果:

<div id="app">text</div>

这里其实也就是利用了 template 节点不会被渲染在页面上的特性。

(3)属性的“条件渲染”

既然 HTML 节点可以条件渲染,多个 HTML 节点可以条件渲染,HTML 节点内字符串可以条件渲染,那么 HTML 属性呢?在编写模板的时候,HTML 属性其实也是字符串,我们能想上面那样,利用 template 模板创建字符串作为 HTML 的属性吗?

<div title="<template v-if='c3'>title content</template>">此处应有 title</div>

是不是一看就感觉怪怪的?vue 也这样觉得,于是控制台里就解析成了:

<div title="<template v-if='c3'>title content</template>">此处应有 title</div>

中间的 <template v-if='c3'>title content</template> 整个的被识别成了字符串,那如果去掉外面的双引号呢?

<div title=<template v-if='c3'>title content</template>>此处应有 title</div>

好像看起来更奇怪了。最后的渲染结果:

<div title="<template">title content>此处应有 title</div>

vue 的模板解析不是简单的依赖于字符串的解析,所以其实这里不能使用这种方法。正确的姿势是利用 v-bind 指令:

<div v-bind:title="c3 ? 'title content' : '' ">title</div>

因为 v-bind 指令的预期值实际上可以接受 js 表达式的,这里我们传入了一个条件表达式。当 c3 为真值的时候,渲染为 title="title content",当 c3 为假值的时候,渲染为 title=""。

Javascript 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
vue.js 上传图片实例代码
Jun 22 #Javascript
详解Angular 开发环境搭建
Jun 22 #Javascript
详解Angular2组件之间如何通信
Jun 22 #Javascript
Angular2 父子组件数据通信实例
Jun 22 #Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 #Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 #Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
浅析Python迭代器的高级用法
2020/07/16 Python
pandas apply多线程实现代码
2020/08/17 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
abstract是什么意思
2012/02/12 面试题
公务员保密承诺书
2014/03/27 职场文书
贺卡寄语大全
2014/04/11 职场文书
计算机专业求职信
2014/06/02 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
老乡聚会通知
2015/04/23 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
《观察物体》教学反思
2016/02/17 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
这样写python注释让代码更加的优雅
2021/06/02 Python
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript