vue入门：（条件渲染）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

  • v-if

  • v-show

  • v-else

 一、v-if:生成或者移出一个元素

 1 <div id="example">
 2     <button v-on:click="ifEvent">点击</button>
 3     <p v-if="greeting">hello</p>
 4 </div>
 5 <script>
 6     var vm = new Vue({
 7         el:'#example',
 8         data:{
 9             greeting:true
10         },
11         methods:{
12             ifEvent(){
13                 this.greeting = !this.greeting;
14             }
15         }
16     });
17 </script>

v-if表达式采用boolean值切换元素生成与删除，由于节点生成和删除会有较高的性能消耗，如果需要一次生成和删除多个元素时，可以采用<template>元素作为包装元素，在包装元素上使用v-if指令，最终的渲染结果不会包含包装元素，看示例：

 1 <div id="example">
 2     <button v-on:click="ifEvent">点击</button>
 3     <div>
 4         <template v-if="greeting">
 5             <h2>我是标题</h2>
 6             <p>我是简介</p>
 7             <p>我是内容</p>
 8         </template>
 9     </div>
10 </div>
11 <script>
12     var vm = new Vue({
13         el:'#example',
14         data:{
15             greeting:true
16         },
17         methods:{
18             ifEvent(){
19                 this.greeting = !this.greeting;
20             }
21         }
22     });
23 </script>

渲染结果：

由于v-if采用的是生成和删除节点，除非在一些购物车等特定应用场景下需要生成和删除节点，多数情况下的需求是只需要做显示和隐藏，所以这时候就没有必要删除节点，仅仅只需要对节点操作display样式实现即可，所以接下来介绍v-show指令。

 二、v-show:展示或隐藏一个元素

 1 <div id="example">
 2     <button v-on:click="ifEvent">点击</button>
 3     <div v-show="greeting">hello</div>
 4 </div>
 5 <script>
 6     var vm = new Vue({
 7         el:'#example',
 8         data:{
 9             greeting:true
10         },
11         methods:{
12             ifEvent(){
13                 this.greeting = !this.greeting;
14             }
15         }
16     });
17 </script>

通过v-show来实现展示和隐藏，实际上就是操作元素的display的样式属性，比如示例中的div在被隐藏是的元素结构是：

然需要注意的是v-show不支持<template>语法。

vi-if是惰性的，如果在初始渲染时条件为假则什么都不做，只有在条件为真时才会编局部编译渲染，并且编译会被缓存起来。

既然有v-if的存在，v-else怎么能少呢？

 三、v-else

 v-else指令的语法含义跟javascript中的else一致，必须跟v-if配合使用，但不能与show一起使用。

 1 <div id="example">
 2     <button v-on:click="ifEvent">点击</button>
 3     <div v-if="greeting">我是会员</div>
 4     <div v-else="greeting">我是超级会员</div>
 5 </div>
 6 <script>
 7     var vm = new Vue({
 8         el:'#example',
 9         data:{
10             greeting:true
11         },
12         methods:{
13             ifEvent(){
14                 this.greeting = !this.greeting;
15             }
16         }
17     });
18 </script>

如果是v-show也需要实现切换的话可以采用非值来实现，比如上面的v-else可以使用下面这样的方式来实现：

<div v-show="!greeting">我是超级会员</div>

以上是 vue入门：（条件渲染） 的全部内容， 来源链接： utcz.com/z/379620.html

回到顶部