一、初探条件渲染

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 语句的后面。一开始我还抱有一丝希望地去试了一下，结果。。。

遍历次数为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&gt;此处应有 title</div>

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

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

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

# vue.js  # 条件渲染  # vue  # 深入理解Vue 的条件渲染和列表渲染  # 简单理解Vue条件渲染  # 学习vue.js条件渲染  # 浅析Vue.js 中的条件渲染指令  # Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）  # 详解vuejs之v-for列表渲染  # Vue.JS入门教程之列表渲染  # Vue基础教程之条件渲染和列表渲染  # 绑定  # 都是  # 成了  # 多个  # 不需要  # 依赖于  # 这两个  # 数为  # 自己的  # 复用  # 的是  # 是个  # 不可能  # 我还  # 都不  # 也会  # 就像  # 那就  # 能在  # 我们可以 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  什么是javascript作用域_全局和局部作用域有什么区别？  JavaScript数据类型有哪些_如何准确判断一个变量的类型  php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  制作电商网页,电商供应链怎么做？  Laravel怎么调用外部API_Laravel Http Client客户端使用  javascript中对象的定义、使用以及对象和原型链操作小结  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  php485函数参数是什么意思_php485各参数详细说明【介绍】  如何在IIS管理器中快速创建并配置网站？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  高端网站建设与定制开发一站式解决方案 中企动力  如何在万网利用已有域名快速建站？  如何快速搭建虚拟主机网站？新手必看指南  Laravel如何实现用户密码重置功能？（完整流程代码）  高端建站如何打造兼具美学与转化的品牌官网？  java中使用zxing批量生成二维码立牌  如何在Tomcat中配置并部署网站项目？  如何用花生壳三步快速搭建专属网站？  如何用AI帮你把自己的生活经历写成一个有趣的故事？  如何在云指建站中生成FTP站点？  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  Java解压缩zip - 解压缩多个文件或文件夹实例  黑客如何通过漏洞一步步攻陷网站服务器？  如何将凡科建站内容保存为本地文件？  Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧  如何在阿里云虚拟服务器快速搭建网站？  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  如何彻底删除建站之星生成的Banner？  Swift中swift中的switch 语句  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  如何打造高效商业网站？建站目的决定转化率  IOS倒计时设置UIButton标题title的抖动问题  Python文件异常处理策略_健壮性说明【指导】  千库网官网入口推荐 千库网设计创意平台入口  javascript如何操作浏览器历史记录_怎样实现无刷新导航  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  米侠浏览器网页背景异常怎么办 米侠显示修复  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  JS中对数组元素进行增删改移的方法总结  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  如何用好域名打造高点击率的自主建站？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  使用spring连接及操作mongodb3.0实例  Laravel如何创建自定义中间件？（Middleware代码示例）  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  敲碗10年！Mac系列传将迎来「触控与联网」双革新