条件选择
条件选择的用法和其他语言类似，一个例子就能解决所有问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <div v-if="number > 90"> {{ number }}分，牛逼 </div> <div v-else-if="number > 60"> {{ number }}分，还行吧 </div> <div v-else-if="number > 20"> {{ number }}分，要努力了 </div> <div v-else> {{ number }}分，废了 </div> </div> <script type="text/javascript"> var vm1 = new Vue({ el: '#app-1', data: { number: Math.round(Math.random() * 100) //随机0到100的整数 } }) </script> </body> </html>
随机出一个分数，将值赋给number，通过对number值的判断显示符合条件的内容
v-if与v-show
<div id="app-2"> <span v-if="isVisible">Hello, TanSea!</span> <span v-show="isVisible">Hello, TanSea!</span> </div> <script type="text/javascript"> var vm2 = new Vue({ el: '#app-2', data: { isVisible: false } }) </script>
v-if与v-show在用法上是一样的，最终展示出来的结果也是一样的，区别在于
v-if：真实的条件渲染，在条件为假时什么也不做，有更高的切换消耗，适应于不怎么切换的场景
v-show：始终被编译并保留，只是简单的用CSS做切换，有更高的初始渲染消耗，适应于频繁切换的场景