您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 条件渲染

《和小米一起学Vue.js》— 条件渲染

[ 孤狼 | 2022-07-29 02:00:50 | Vue | 998°C | 0条评论 ]

在显示过程中,以往都是后台程序判断数据之后来控制元素是否显示,或者通过js来控制css样式切换来控制。现在在vue中可以通过v-if指令来控制。


v-if

 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。

<div v-if="变量"></div>
<div v-if="show">{{name}}</div>


v-else

你可以使用 v-else 指令来表示 v-if 的 “else 块” 

<div v-if="show">{{name}}</div>
<div v-else>{{name}}退出了房间</div>


v-else-if

 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>


v-show

根据表达式之真假值,切换元素的 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>












转载请注明出处:http://gl.paea.cn/n.php?n=173
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索