Vue中的条件渲染

2019年1月25日17:41:33 5 阅读(255)

vue中的条件渲染是怎么用的?都有哪些指令呢?在vue中条件渲染都有哪些机制,以及可以达到同样需求的语法有哪些区别呢?

Vue中的条件渲染

v-if 与v-show

  1. <div id="app">
  2.     <div v-if="show">{{message}}</div>
  3.     <div v-show="show">{{message}}</div>
  4. </div>
  5. <script>
  6.     var vm = new Vue({
  7.         el: "#app",
  8.         data: {
  9.             message: "Hello world",
  10.             show: false
  11.         }
  12.     })
  13. </script>

v-if和v-show是有一些相似地方的,比如上面的代码中使用了v-if和v-show指令,意思就是当后面跟的表达式show的变量值为true时,将会显示message的内容,反之则不显示,因为默认为show: false,所以打开页面为不显示的情况,那么这两个指令都是不显示会有什么区别吗?其实是有的,我们一起来看一下,如下图所示:

Vue中的条件渲染

我们通过查看dom元素可以看到,v-if对应的标签变量值是false,便不会存在于dom之上。而v-show对应的标签变量值如果是false,那么还是会存在于dom上,并且会以display:none的形式放在页面之上。

总结

如果需要非常频繁地切换,则使用v-show较好,因为它不会频繁的在页面删除添加dom,只是简单地基于 CSS 进行切换。

如果在运行时条件很少改变,则使用v-if较好,因为它是“真正”的条件渲染,每次隐藏和显示相当于删除dom再添加dom。

v-if / v-else-if / v-else

  1. <div id="app">
  2.     <div v-if="show === 'a'">This is A</div>
  3.     <div v-else-if="show === 'b'">This is B</div>
  4.     <div v-else>This is others</div>
  5. </div>
  6. <script>
  7.     var vm = new Vue({
  8.         el: "#app",
  9.         data: {
  10.             show: "a"
  11.         }
  12.     })
  13. </script>

因为show的值为a,当我们打开页面便会显示 This is A。

注意

这几个指令需要注意的是v-else元素必须紧跟在带v-if或者v-else-if的元素的后面,v-else-if也必须紧跟在带v-if或者v-else-if的元素之后,否则它将不会被识别。

key值

vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换,那么输入的内容将不会被清空。

代码:

  1. <div id="app">
  2.     <div v-if="show">
  3.         用户名:<input />
  4.     </div>
  5.     <div v-else>
  6.         邮箱:<input />
  7.     </div>
  8. </div>
  9. <script>
  10.     var vm = new Vue({
  11.         el: "#app",
  12.         data: {
  13.             show: false
  14.         }
  15.     })
  16. </script>

直观看图:

Vue中的条件渲染

我们可以发现当我改变show的值为true时,input输入框的内容并没有被清空,而是之前输入的内容。

如果有时候我们需要清空里面的内容要怎么做呢?

vue提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的key属性即可:

  1. <div id="app">
  2.     <div v-if="show" key="username">
  3.         用户名:<input />
  4.     </div>
  5.     <div v-else key="email">
  6.         邮箱:<input />
  7.     </div>
  8. </div>
  9. <script>
  10.     var vm = new Vue({
  11.         el: "#app",
  12.         data: {
  13.             show: false
  14.         }
  15.     })
  16. </script>

这样一来,每次切换时,输入框都将被重新渲染。请看:

Vue中的条件渲染

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:5   其中:访客  4   博主  1

    • avatar 木作的 0

      这是用vue开发的博客吗?

        • avatar 舍得 Admin

          @木作的 不是,用的wordpress

        • avatar 惠帮帮众包 1

          支持一下博主

          • avatar 红嘴鸭 1

            非常实用的干货 谢谢博主

            • avatar 头条 0

              文章不错非常喜欢