块使用if
可以使用template元素,来包含多个元素
注意这个id不能和v-if放在同一个标签里,不然会报错-
<div id="id2" >
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-else>
Now you don't
</div>
</div>
<script>
var vm2 = new Vue({
el: '#id2',
data: {
ok:true,
}
});
</script>
v-else-if(2.1.0 新增)
<div id="id3">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var vm3 = new Vue({
el: '#id3',
data: {
type:'D',
}
});
</script>
在下面的例子中,用户在input中如数的内容,在切换的时候不会被清空,变的只有placeholder里的内容
<div id="id4">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</div>
<script>
var vm4 = new Vue({
el: '#id4',
data: {
loginType:'username',
}
});
</script>
如果你想if else中的元素互不相关,可以使用key,那么每次切换都会重新渲染,不会保留用户之前填的内容。同时没用key都会复用比如label标签
<div id="id5">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email">
</template>
</div>
<script>
var vm5 = new Vue({
el: '#id5',
data: {
loginType:'username',
}
});
</script>
v-show 只是简单地切换元素的 CSS 属性 display。v-show 不支持 元素,也不支持 v-else
<h1 id='id6' v-show="ok">Hello!</h1>
<script>
var vm6 = new Vue({
el: '#id6',
data: {
ok:true,
}
});
</script>