vue学习：条件渲染指令

最新推荐文章于 2024-08-22 16:30:00 发布

你认识小汐吗

最新推荐文章于 2024-08-22 16:30:00 发布

阅读量436

点赞数

分类专栏： vue 条件渲染

本文链接：https://blog.csdn.net/sayoko06/article/details/85000508

版权

vue 同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

条件渲染

1 篇文章 0 订阅

订阅专栏

一、v-if v-else-if v-else

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <div v-if="message==='A'">
        str = {{message}}
    </div>
    <div v-else-if="message==='B'">
        str = {{message}}
    </div>
    <div v-else-if="message==='C'">
        str = {{message}}
    </div>
    <div v-else>
        str = null
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: 'B'
    }
    })
</script>
</html>

二、v-show

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-show 不支持 <template> 语法，也不支持 v-else。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
   <div v-show="flag">
       you can see me
   </div>

</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag: true
         }
    })
</script>
</html>

三、v-if和v-show的区别

v-if :1.是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　 2.是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做

　 3.有很高的切换开销，适用于条件不太容易改变的时候

v-show:1.不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换

　　　 2.有很高的初始渲染开销，适用于非常频繁地切换

四、用key管理科复用的元素

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

<div class="demo">
    <button @click="greet">toggle 切换</button>
    <template v-if="ok">
      <label>用户名</label>
      <input placeholder="输入用户名" key="username-input">
    </template>
    <template v-else>
      <label>昵称</label>
      <input placeholder="输入昵称" key="nickname-input">
    </template>
</div>

var vm = new Vue({
    el: '.demo',
    data: {
      ok: true
    },
    methods: {  
    greet: function (event) {  
      this.ok=!this.ok;
    }  
  }  
})

如果不添加key属性，点击切换，虽然dom变了，但是vue在渲染元素时，出于效率考虑，会尽可能的复用已有的元素而非重新渲染。如果两个input框添加了key属性以后，就不会复用了。