v-if用于条件判断，判断dom元素是否显示
例：判断学生成绩
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2 v-if="fen>90">优异</h2> <h2 v-else-if="fen>70">良好</h2> <h2 v-else-if="fen>60">及格</h2> <h2 v-else>不及格</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { // isFlag:true, fen:99 }, }) </script> </body> </html>
输出结果为：
v-if的demo切换按钮制作
先看效果：
<!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> v-if的demo切换按钮制作</title> </head> <body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="请输入用户名" > </span> <span v-else="isUser"> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="请输入用户邮箱" > </span> <button @click="isUser=!isUser">切换类型</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ isUser:true } }) </script> </body> </html>
这里没有绑定key值所以会导致输入框未清空其内容
为什么input输入框值被复用了？
这里就需要了解一下vue底层操作
vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。
在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。
如果不希望出现类似复用问题，可以给对应的dom元素加上key值，并保证key不同。
这里的key值要绑定 其对应的id
<input type="text" id="username" placeholder="请输入用户名" key="username"> <input type="text" id="email" placeholder="请输入用户邮箱" key="email"> <!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> v-if的demo切换按钮制作</title> </head> <body> <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="请输入用户名" key="username" > </span> <span v-else="isUser"> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="请输入用户邮箱 "key="email" > </span> <button @click="isUser=!isUser">切换类型</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ isUser:true } }) </script> </body> </html>
效果如下：
