第九节:Vue指令:v-if条件判断

1.v-if指令

v-if指令是用来控制元素的切换显示

1.1 条件判断指令的基本使用

1.1.1 v-if 指令的基本使用

    
你现在能看到我

示例说明:

1. 如果在控制台输入 vm.seen = false，你会发现之前显示的消息消失了。
2. 因为v-if指令会根据seen的布尔值来判断当前h2需不需要显示
3. 如果是其他数据类型会转为布尔值
   
   

1.1.2 v-else

看到这个是不是很熟悉,在JavaScript中,if流程控制语句中会有一个else,当条件为假的时候执行,.

那么既然在vue中有v-if指令来做添加判断,可定会有一个指令v-else来配合v-if条件为假的时候显示

示例: 使用 v-else 指令来表示 v-if 的“else 块”：

  你能看到我


   你看不到我

注意事项:

1. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

1.1.3 v-else-if 指令

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

示例代码:

    
网络连接错误
    
网络连接成功

    Toggle Error
    Toggle Success

  

示例说明:

1. 当数据中err为true时,显示v-if所在的DOM元素, v-else-if所在的DOM元素不会显示
2. 当数据中err为false时,不显示v-if所在的DOM元素,
3. 然后在根据v-else-if的判断条件是否为true,来决定是否显示所在的DOM元素

1.2 template标签

template标签, 是vue提供给我们的没有实际意义的,用来包裹元素的,

为什么需要template标签?

1. 原因在于如果我需要多个标签同时显示或隐藏,我们就需要把这些标签包裹在同一标签里
2. 如果不使用template标签,渲染出来结果就会多一层空标签

通过下面的示例来了解使用和不使用的不同.

1.2.1 未使用template标签

例如:

    

        
注册
        
    
    

        
登录
        
    

    {{register?"登录":"注册"}}

显示结果:

v-if未用template.png

示例结果说明:

1. 通过示例发现,会多出一层无用的div标签
2. 如果这种写法在你的项目中过多,就会导致嵌套过多无用的层级标签

1.2.2 使用template标签

template标签在渲染的时候并不会渲染template标签,这个标签本身没有实际意义:

示例代码如下:

    
    
    
    
    {{register?"登录":"注册"}}

显示结果:

v-if使用了template.png

通过示例可以直观的了解到,template标签没有被渲染, 也没有多出一层无用的标签

1.3. 用key管理可复用的元素

1.3.1 关于vue复用元素说明:

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

示例代码如下:

    
    
    
    
        {{loginType=="username"?"邮箱登录":"用户名登录"}}
    

那么在上面的代码中切换时 loginType 将不会清除用户已经输入的内容。
因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder。

这样也不总是符合实际需求，
有的时候就需要让vue不复用我们的DOM元素.
因此 Vue 为你提供了一种方式来表示“这两个元素是完全独立的，不要复用它们”。
只需添加一个具有唯一值的 key 属性即可：

2.v-show 指令

2.1 v-show 指令的基本使用

另一个根据条件展示元素的指令是 v-show 指令。用法和v-if大致一样：

示例代码:

Hello!

2.2 不支持template和v-else

注意，

1. v-show 不支持