<h2>v-if</h2><divid="app1"><h1v-if="awesome">Vue is awesome!</h1><h1v-else>Oh no 😢</h1></div><script>var app1 =newVue({
el:'#app1',
data:{// awesome: true
awesome:false}});</script><hr>
v-else
<h2>v-else</h2><divid="app3"><divv-if="Math.random() > 0.5">
Now you see me
</div><divv-else>
Now you don't
</div></div><script>var app3 =newVue({
el:'#app3',})</script><hr>
v-else-if
<h2>v-else-if</h2><divid="app4"><divv-if="type === 'A'">
A
</div><divv-else-if="type === 'B'">
B
</div><divv-else-if="type === 'C'">
C
</div><divv-else>
Not A/B/C
</div></div><script>var app4 =newVue({
el:'#app4',
data:{
type:'B'}});</script><hr>
使用key管理可复用的元素
<h2>使用key管理可复用的元素</h2><p>未使用key的时候,在文本框中输入一些内容,再点击切换按钮,发现并没有重新渲染</p><divid="app5"><templatev-if="loginType === 'username'"><label>Username</label><inputplaceholder="Enter your username"></template><templatev-else><label>Email</label><inputplaceholder="Enter your email address"></template><buttonv-on:click="toggle">toggle</button></div><script>var app5 =newVue({
el:"#app5",
data:{
loginType:'username'},
methods:{
toggle:function(){this.loginType =(this.loginType ==='username')?'email':'username';}}});</script><hr><p>使用key的时候,在文本框中输入一些内容,再点击切换按钮,发现并没有重新渲染</p><divid="app6"><templatev-if="loginType === 'username'"><label>Username</label><inputplaceholder="Enter your username"key="username-input"></template><templatev-else><label>Email</label><inputplaceholder="Enter your email address"key="email-input"></template><buttonv-on:click="toggle">toggle</button></div><script>var app6 =newVue({
el:"#app6",
data:{
loginType:'username'},
methods:{
toggle:function(){this.loginType =(this.loginType ==='username')?'email':'username';}}});</script><hr>