Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动-CFANZ编程社区

1 v-if V.S v-show

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue中的条件渲染</title>
     <script src="../vue.js"></script>
 </head>
 <body>
 
 <div id="app">
     <div v-if="show" data-test="v-if">{{message}}</div>
     <div v-show="show" data-test="v-show">{{message}}</div>
 </div>
 
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             show: false,
             message: "Java Edge"
         }
     })
 </script>
 </body>
 </html>

控制台更新：

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_html

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_Vue_02

初始用的 v-show

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_Vue_03

v-if v-show都能控制一个模板标签是否展示。

V-if 对应变量名 false 时，就不存在该 DOM 了

V-show 对应变量名 false 时，该 DOM 还存在页面上，只是 display:none

当频繁指定 DOM 元素是否显示，v-show性能更好，因其不会频繁删除增加 DOM。

2 v-if && v-else

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue中的条件渲染</title>
     <script src="./vue.js"></script>
 </head>
 <body>
 
 <div id="app">
     <div v-if="show">
         用户名：<input key="username"/>
     </div>
     <div v-else>
         邮箱名：<input key="password"/>
     </div>
 </div>
 
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             show: false,
         }
     })
 </script>
 </body>
 </html>

根据show的值来展示不同输入框。

在div里使用了v-if、v-else指令来实现条件渲染:

show=true，展示用户名输入框
show=false，展示邮箱输入框

在script标签中，使用Vue构造函数创建了一个Vue实例，并将其挂载到id为"app"的div上。
在data中定义了一个名为show的属性，并将其初始值设为false。总之，这段代码展示了Vue中的条件渲染的使用方法。

注意，必须连在一起使用：

<div id="app">
     <div v-if="show">
         用户名：<input key="username"/>
     </div>
     <span></span>
     <div v-else>
         邮箱名：<input key="password"/>
     </div>
 </div>

中间加其他标签后报错：

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_Vue_04

3 v-else-if

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_用户名_05

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_html_06

key

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Vue中的条件渲染</title>
     <script src="../vue.js"></script>
 </head>
 <body>
 
 <div id="app">
     <div v-if="show">
         用户名：<input/>
     </div>
     <div v-else>
         邮箱名：<input/>
     </div>
 </div>
 
 <script>
     var vm = new Vue({
         el: "#app",
         data: {
             show: false,
         }
     })
 </script>
 </body>
 </html>

更该show值，即可切换显示的标签：

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_用户名_07

一开始是用户名时，我输入了名字，更新 show 后，Vue 会复用input 标签的内容，导致如下现象：

Vue实战(08)-惊喜不断！Vue中的条件渲染让你的页面更加生动_Vue_08

怎么能实现切换标签后，把内容清空，方便重新输入呢？

<div id="app">
     <div v-if="show">
         用户名：<input key="username"/>
     </div>
     <div v-else>
         邮箱名：<input key="email"/>
     </div>
 </div>

给 input 标签加个唯一名称就好啦，Vue 就不会再复用之前标签内容。