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 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php 文章调用类代码
2011/08/11 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python绘制热力图heatmap
2020/03/23 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
什么是Python变量作用域
2020/06/03 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
酒店管理自荐信
2013/10/23 职场文书
售房委托书
2014/08/30 职场文书
门面房租房协议书
2014/12/01 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript