浅析Vue.js 中的条件渲染指令

 更新时间:2018年11月19日 09:05:54   作者:deniro  
这篇文章主要介绍了Vue.js 中的条件渲染指令,Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

1 应用于单个元素

Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。

html:

<div id="app">
 <p v-if="type===1">拌面</p>
 <p v-else-if="type===2">扁肉</p>
 <p v-else="type===3">其它</p>
</div>

js:

<script>
 var app = new Vue({
  el: '#app',
  data: {
   type: 2
  }
 });
</script>

输出结果:

扁肉

当表达式的值为 true 时,当前元素或组件及所有的子节点都会被渲染出来。

2 应用于多个元素

上述示例中的代码只能判断当前元素, 如果需要一次性判断多个元素,那么可以使用 <template> 元素并在该元素中使用条件指令,最终的渲染结果不会包含 <template> 元素 。

html:

<div id="app2">
 <template v-if="type==='菜单'">
  <p>拌面</p>
  <p>扁肉</p>
  <p>其它</p>
 </template>
</div>

js:

var app2 = new Vue({
 el: '#app2',
 data: {
  type:'菜单'
 }
});

渲染后的代码:

<div id="app2"><p>拌面</p> <p>扁肉</p> <p>其它</p></div>

3 性能上的考量

另外 Vue.js 出于性能方面的考虑,会尽可能地复用已有的元素。

html:

<div id="app3">
 <template v-if="type==='mobile'">
  <label>手机号:</label>
  <input placeholder="请输入手机号">
 </template>
 <template v-else>
  <label>邮箱:</label>
  <input placeholder="请输入邮箱">
 </template>
 <button @click="toggleAccount">切换账号</button>
</div>

js:

var app3 = new Vue({
 el: '#app3',
 data: {
  type: 'mobile'
 },
 methods: {
  toggleAccount: function () {
   this.type = (this.type === 'mobile' ? 'mail' : 'mobile');
  }
 }
});

效果( demo ):

从示例效果中我们可以发现,输入框的内容并没有发生变化,说明这里 Vue.js 复用了 <input> 元素。

我们也可以通过指定 input 元素的唯一的 key 来避免被复用。

html:

<div id="app3">
 <template v-if="type==='mobile'">
  <label>手机号:</label>
  <input placeholder="请输入手机号" key="mobile">
 </template>
 <template v-else>
  <label>邮箱:</label>
  <input placeholder="请输入邮箱" key="email">
 </template>
 <button @click="toggleAccount">切换账号</button>
</div>

效果:

我们为每一个 input 指定了 key 属性,所以它们是独立的,每次点击都不一样。而这里的 label 是可复用的,因为我们没有给它设定 key 属性。

总结

以上所述是小编给大家介绍的Vue.js 中的条件渲染指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • webstorm添加vue.js支持的方法教程

    webstorm添加vue.js支持的方法教程

    因为本人使用的是webstorm2016 2.3版本,结果竟然不支持vue文件,所以找到了一个解决方法,下面这篇文章主要给大家介绍了关于webstorm添加vue支持的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • vue中html2canvas给指定区域添加满屏水印

    vue中html2canvas给指定区域添加满屏水印

    本文主要介绍了vue中html2canvas给指定区域添加满屏水印,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • Vue Router 实现动态路由和常见问题及解决方法

    Vue Router 实现动态路由和常见问题及解决方法

    动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表。这篇文章主要介绍了Vue Router 实现动态路由和常见问题解决方案,需要的朋友可以参考下
    2020-03-03
  • Vue3优雅的实现跨组件通信的常用方法总结

    Vue3优雅的实现跨组件通信的常用方法总结

    开发中经常会遇到跨组件通信的场景,props 逐层传递的方法实在是太不优雅了,所以今天总结下可以更加简单的跨组件通信的一些方法,文中通过代码实例讲解的非常详细,需要的朋友可以参考下
    2023-11-11
  • Create vite理解Vite项目创建流程及代码实现

    Create vite理解Vite项目创建流程及代码实现

    这篇文章主要为大家介绍了Create vite理解Vite项目创建流程及代码实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 详解Vue中的自定义指令

    详解Vue中的自定义指令

    这篇文章主要介绍了Vue中的自定义指令的相关资料,帮助大家更好的理解和学习vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • 使用vue中的v-for遍历二维数组的方法

    使用vue中的v-for遍历二维数组的方法

    下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • lottie实现vue自定义loading指令及常用指令封装详解

    lottie实现vue自定义loading指令及常用指令封装详解

    这篇文章主要为大家介绍了lottie实现vue自定义loading指令及常用指令封装,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue上传项目到git时,如何忽略node_modules文件夹

    vue上传项目到git时,如何忽略node_modules文件夹

    这篇文章主要介绍了vue上传项目到git时,如何忽略node_modules文件夹,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue + iView实现Excel上传功能的完整代码

    Vue + iView实现Excel上传功能的完整代码

    前一段时间项目经历了前端上传文件的过程,首先进入页面会展示默认的样子,选中要上传的excel文件,本文通过实例图文相结合给大家介绍的非常详细,需要的朋友参考下吧
    2021-06-06

最新评论