v-if指令作用

根据表达式的真假切换元素的显示状态

  1. 本质是通过操纵dom元素来切换显示状态
  2. 表达式的值为true,元素存在于dom树中，为false,从dom树中移除
  3. 频繁的切换使用v-show,反之使用v-if,前者的切换消耗小
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <div id="app">
    <input type="button" value="切换状态" @click="changeShow">
    <h1 v-show="isshow">Web前端</h1>
    <h2 v-if="isshow">Web前端</h2>
    <h3 v-if="temperature>=35">热死了</h3>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
     var app=new Vue({
    	 el:"#app",
    	 data:{
    		 isshow:false,
    		 temperature:40
    	 },
    	 methods:{
    		 changeShow:function(){
    			 this.isshow=!this.isshow;
    		 }
    	 }
     })
    </script>
    </body>
    </html>
    点击“切换状态”之后：

v-if常见使用方法详解

v-if一般有两个场景：
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换
Vue官方的简单实例:

  1. 实现了 type等于不同值，A，B，C 三个元素的展示情况
  2. 实现了点击按钮两个视图的切换
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Vue中v-if的常见使用</title>
     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    </head>
    <script>
    window.onload = function(){

     //创建一个vue实例
     var app = new Vue({
     el: '#app',
     data: {
      type:'C',
      loginType:'username'
     },
     methods:{
      changeloginType(){
      let self = this;
      if(self.loginType=='username'){
       self.loginType = ''
      }else{
       self.loginType = 'username'
      }
      }
     }
     })
    }

    </script>
    <body>
     <div id="app">
     <div style="color:red">v-if的简单实用</div>
     <template>
      <div v-if="type == 'A'">
      A
      </div>
      <div v-else-if="type=='B'">
      B
      </div>
      <div v-else>
      C
      </div>
     </template>
     <div style="color:green">v-if的弹框切换</div>
     <template v-if="loginType === 'username'">
      <label>用户名：</label>
      <input placeholder="Enter your username" key="username-input">
     </template>
     <template v-else>
      <label>密码：</label>
      <input placeholder="Enter your email address" key="email-input">
     </template>
     <button @click="changeloginType">切换状态</button>
     </div>
    </body>
    </html>
    效果图:

通过 v-if 来判断数组是否为空

此方法已经在处理PHP回传 JSON 数据时，对键名解析使用成功

语法为:

1
2
为空：array == undefined ||array == null || array.length <= 0     (顺序不能调换)
不为空： array !==undefined && array != null  && array.length > 0   (顺序不能调换)

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul v-if="commentList == undefined ||commentList == null || commentList.length <= 0 " >
	暂无评论！
</ul>

<ul v-if="commentList != undefined && commentList != null && commentList.length > 0 " >
	<li class="list-group-item"  v-for="(item,index) in commentList"  >
		<div class="username">
			{{ item.username }} 说：
		</div>
		<div class="content" >
			{{ item.content }}
		</div>
	</li>
</ul>

相关链接

  1. v-if指令
  2. 对vue中v-if的常见使用方法详解
  3. VUE 模板 v-if 判断 数组是否为空