先看个小例子
<!-- 条件渲染某一块内容 -->
<div id="vm1">
<h1 v-if="awesome">Vue is awesome!</h1>
<button v-on:click="reverse">反转</button>
</div>
来点Vue代码
<script type="text/javascript">
var vm1 = new Vue({
el: '#vm1',
data:{
awesome:true
},
methods:{
reverse:function(){
this.awesome = !this.awesome;
}
}
})
</script>
效果应该也能猜到，点一下，玩一年，呸！点一下这个标题就没了。
点一下，玩一年
懒得去控制台敲代码
有了if，没有else肯定对不起大家（当然else-if也是有的，我懒）
<!-- if-else结构 -->
<div id="vm2">
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
<button v-on:click="reverse">反转</button>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#vm2',
data:{
awesome:true
},
methods:{
reverse:function(){
this.awesome = !this.awesome;
}
}
})
</script>
反复横跳：
献给喜爱Vue的你
和开始秃头的我
如果想切换多个元素，可以用<template>把它们包起来，官网的示例是这样式的（我做了一点魔改）：
<!-- 天生不可见呢 -->
<template id="vm3" v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<script type="text/javascript">
var vm3 = new Vue({
el: '#vm3',
data: {
ok: true
}
})
</script>
如果你觉得这个东西能出来结果，那你就错了！事实上<template>标记是Html5新加的元素（原谅我以为它是自定义的），默认display:none;看来还得再想一想。
实际上可以这么用：
<!-- 以下两种写法在Vue引擎中会报警告，不推荐，只为了展示效果 -->
<template id="vm4">
<div v-if="ok">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</template>
<script type="text/javascript">
var vm4 = new Vue({
el: '#vm4',
computed: {
ok: function(){
return Math.random() > 0.5;
}
}
})
</script>
在此例子中，ok是一个计算属性，在template下属的div中，所以，显示什么，就得看运气了。
第一把
第。。。把
所以不要尝试让template显示出来。
然后是一个和v-if类似的指令v-show
<div id="vm5">
<h1 v-show="ok">Hello!</h1>
<button v-on:click="reverse">反转</button>
</div>
<script type="text/javascript">
var vm5 = new Vue({
el: '#vm5',
data: {
ok: true
},
methods: {
reverse: function(){
this.ok = ! this.ok;
}
}
})
</script>
效果嘛，很简单。
你好
同样的地方，不一样的你
它们两个的区别，就在于v-if很聪明，如果条件为假，这个元素真的是不渲染的，而v-show很实诚，不论条件真假，元素都给你摆在页面上（为啥没有？F12自己看），然后把display改成none。也就是说，如果这个元素需要频繁切换的话，v-show只会渲染一次，效率较高，如果这个元素切换不频繁的话，v-if比较合适，毕竟元素多的话，渲染速度即成败。。。
最后是一点“原理”的问题。
<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>
像上面的代码，切换的时候，label和input元素是不会重复渲染的，唯一改变的是input的placeholder属性，所谓换汤不换药。
如果你想让他们加个班，不妨这么做。
<!-- 加了key的元素不复用 -->
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
加了key标识之后（类似于原生中的id），真的是什么就是什么了，不过label还是照常，因为没加key。
