RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
vue.js如何实现条件渲染-创新互联

这篇文章主要介绍了vue.js如何实现条件渲染，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司2013年成立，先为内蒙古等服务建站，内蒙古等地企业，进行企业商务咨询服务。为内蒙古企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

一、初探条件渲染

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

（1）v-if


  c1
...... var app = new Vue({   el: '#app',   data: {     c1: false   } });

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

（2）v-else


  c1
  c1 is not true
...... 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


  c1
  c2
...... var app = new Vue({   el: '#app',   data: {     c1: false,     c2: true   } });

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


  
c2

不难理解，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 属性。


  c4
...... var app = new Vue({   el: '#app',   data: {     c4: false   } });

当 v-show 绑定的值为真值的时候，节点正常渲染；当为假值的时候，节点仍旧渲染，但是添加了 ，将节点通过 CSS 的方式隐藏。渲染结果如下：


  c4

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

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

（2）key

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


  

    
      name:
      
    

    
      email:
      
    

    toggle
  

......
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 值就可以了。


  

    
      name:
      
    

    
      email:
      
    

    toggle
  

......
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}}
 
Yes

{{/if}}

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

Yes

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

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

{{#if ok}}
 
Yes

 
Yes

 
Yes

{{/if}}

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

Yes
Yes
Yes

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


 
Yes

 
Yes

 
Yes

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

（2）利用条件渲染字符串

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


  text

......
var app = new Vue({
  el: '#app',
  data: {
    c3: true
  }
});

渲染结果：

text

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

（3）属性的“条件渲染”

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

复制代码 代码如下:


此处应有 title

是不是一看就感觉怪怪的？vue 也这样觉得，于是控制台里就解析成了：

复制代码 代码如下:


此处应有 title

中间的 整个的被识别成了字符串，那如果去掉外面的双引号呢？

复制代码 代码如下:


title content>此处应有 title

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

title content>此处应有 title

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

title

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

感谢你能够认真阅读完这篇文章，希望小编分享的“vue.js如何实现条件渲染”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网页题目：vue.js如何实现条件渲染-创新互联
本文来源：http://lswzjz.com/article/cdjhis.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.lswzjz.com

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-13

乐山大橙子建站 乐山网站建设 乐山网站设计 乐山网站制作 成都做网站