<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>条件渲染指令</title>
</head>
<body>
<div id="app">
<p v-if="status === 1">当status为 1 时显示改行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<!--如果一次判断的是多个元素，可以在Vue.js内置的<template>
元素上使用条件指令，最终渲染的结果不会包含该元素-->
<div id="app2">
<template v-if="status === 1">
<p>人生海海</p>
<p>人生海海</p>
<p>人生海海</p>
</template>
</div>
<div id="app3">
<template v-if="type === 'name'">
<label>用户名：</label>
<input placeholder="输入用户名">
</template>
<template v-else>
<label>邮箱：</label>
<input placeholder="输入邮箱">
</template>
<button @click="handleToggleClick">输入切换类型</button>
</div>
<br>
<br>
<!--如果不希望这样做，可以使用Vue.js提供的key属性，它可以让自己决定是否要复用元素
，key的值必须是唯一的，例如：-->
<div id="app4">
<template v-if="type === 'name'">
<label>用户名2：</label>
<input placeholder="输入用户名2" key="name-input">
</template>
<template v-else>
<label>邮箱2：</label>
<input placeholder="输入邮箱2" key="mail-input">
</template>
<button @click="handleToggleClick">切换输入类型2</button>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
status:1
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
data:{
type:'name'
},
methods:{
handleToggleClick:function(){
this.type = this.type === 'name' ? 'mail':'name';
}
}
})
</script>
<script>
var app = new Vue({
el:'#app4',
data:{
type:'name'
},
methods:{
handleToggleClick:function(){
this.type = this.type === 'name' ? 'mail' : 'name';
}
}
})
</script>
</body>
</html>
给两个<input>元素都增加key后，就不会复用了，切换类型时键入的内容也会被删除，不过<lable>元素仍然是被复用的，因为没有添加key属性。
条件渲染指令.png
网友评论