在显示过程中，以往都是后台程序判断数据之后来控制元素是否显示，或者通过js来控制css样式切换来控制。现在在vue中可以通过v-if指令来控制。
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。
孤狼 | 
2022-07-29 02:00:50 | 
1510°C | 
0条评论 ]<div v-if="变量"></div>
<div v-if="show">{{name}}</div>你可以使用 v-else 指令来表示 v-if 的 “else 块”
<div v-if="show">{{name}}</div>
<div v-else>{{name}}退出了房间</div>v-else-if ，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
<div v-else-if="判断语句"></div>
<div v-if="name=='张三'">你好张三</div>
<div v-else-if="name=='李四'">你好李四</div>
<div v-else>请登录</div>Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快之外。如input元素如果已经存在只会替换不同部分，而不会重新渲染，这会导致数据始终存在不被清空。如果想清空数据，需要使用 "key" 来让控件独立。这样就不会复用之前的控件。
<div v-if="show">
用户名<input type="text" key="nameinput">
</div>
<div v-else>
密码<input type="text" key="passinput">
</div>
<button @click="show=!show">切换</button>根据表达式之真假值，切换元素的 display CSS属性
TIP：v-if 是删除与渲染元素，v-show只切换display属性，高频切换情况下v-show更节省性能。
<div v-show="表达式"></div>
<div v-show="show">v-show</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 条件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="name=='张三'">你好张三</div>
<div v-else-if="name=='李四'">你好李四</div>
<div v-else>请登录</div>
<div v-if="show">
用户名<input type="text" key="nameinput">
</div>
<div v-else>
密码<input type="text" key="passinput">
</div>
<button @click="show=!show">切换</button>
<div v-show="show">v-show</div>
</div>
<script>
let ndata={
name:'张三',
show:true
};
const app=new Vue({
el:"#app",
data:ndata
});
</script>
</body>
</html>
赞赏一个鸡腿
