Vue学习5:条件渲染

时间:2021-01-04 03:10:05

上代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--v-if指令-->
<p v-if="seen>100">you can see me</p>
<p v-else-if="seen>50">or you can see me</p>
<p v-else-if="seen>10">you may see me</p>
<p v-else>well, you can only see me</p>
<!--注意:v-else、v-else-if必须跟在v-if或v-else-if后面--> <!--vue会尽可能高速的渲染元素,通常是复用已有元素-->
<!--下面代码中切换loginType不会清除已输入的内容,因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder-->
<template v-if="loginType==='username' ">
<label for="um">username</label>
<input type="text" placeholder="enter username" id="um">
</template>
<template v-else>
<label for="email">email</label>
<input type="text" placeholder="enter email" id="email">
</template>
<button @click="ToggleLoginType">toggle login type</button> <br> <!--如果想表达“这两个元素是独立的,不要复用它们”,那么使用key-->
<!--这样每次切换时,输入框都会被重新渲染-->
<template v-if="loginType==='username' ">
<label for="um1">username</label>
<input type="text" placeholder="enter username" id="um1" key="username">
</template>
<template v-else>
<label for="email1">email</label>
<input type="text" placeholder="enter email" id="email1" key="email">
</template>
<!--注意label仍然被高效复用,因为它没有唯一值key--> <!--v-show使用-->
<p v-show="shown">this will be shown</p>
<!--v-show不支持template元素,也不支持v-else-->
</div> <script>
new Vue({
el: '#app',
data:{
seen: 11,
loginType: 'username',
shown: true
},
methods:{
ToggleLoginType:function(){
if(this.loginType==='username'){
this.loginType ='email';
}else{
this.loginType='username';
}
}
}
})
</script>
</body>
</html>

运行结果:

Vue学习5:条件渲染

 这里再补充两点:

1.html中的<template>元素是一种保存客户端内容的机制,该内容在页面加载时不被渲染,但是运行时可以使用js实例化。

2.v-if与v-show的区别:

v-show只是简单的切换css属性display,元素始终被渲染被保存在DOM中;

v-show的切换开销相比v-if小,但是初始渲染开销比v-if大;

因此频繁切换,使用v-show;运行后很少改变,使用v-if。

Vue学习5:条件渲染

参考:MDN <template>https://cn.vuejs.org/v2/guide/conditional.html