11_条件渲染
总结：
条件渲染：
1.v-if
写法：
（1）v-if="表达式"
（2）v-else-if="表达式"
(3）v-else-if="表达式"
适用于：切换频率较低的场景
特点：不展示DOM元素直接被移除
注意：v-if可以和 v-else-if、v-else-if一起使用，但要求结构不能被“打断”
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>条件渲染</title> 8 <script type="text/javascript" src="../js/vue.js"> 9 </script> 10 </head> 11 <body> 12 <!-- 准备好一个容器 --> 13 <div id="root"> 14 <h2>当前的值是：{{n}}</h2> 15 <button @click="n++">点我n+1</button> 16 <!-- 使用v-show做条件渲染 --> 17 <!-- <h2 v-show="false">欢迎来到{{name}}网课学习</h2> 18 <h2 v-show="2 === 2">欢迎来到{{name}}网课学习</h2> --> 19 20 <!--使用v-if做条件渲染 --> 21 <!-- <h2 v-if="false">欢迎来到{{name}}网课学习</h2> 22 <h2 v-if="1 === 1">欢迎来到{{name}}网课学习</h2> --> 23 24 <!-- v-else和v-else-if --> 25 <!-- <div v-if="n === 1">你好</div> 26 <div v-else-if="n === 2">你很好</div> 27 <div v-else="n === 3">你非常好</div> 28 --> 29 <!-- template于v-if的配合使用 --> 30 <template v-if="n === 1"> 31 <h2>你好</h2> 32 <h2>大黄狗</h2> 33 <h2>明天见</h2> 34 </template> 35 </div> 36 </body> 37 <script type="text/javascript"> 38 Vue.config.productionTip = false //阻止vue在启动时生成生产提示 39 new Vue({ 40 el:'#root', 41 data:{ 42 name:'尚硅谷', 43 n:0 44 }, 45 }) 46 </script> 47 </html>
