条件渲染总结:
- v-if
- 写法:
- v-if="表达式"
- v-else-if="表达式"
- v-else="表达式"
- 适用于:切换频率较低的场景
- 特点:不展示DOM元素直接被移除
- 注意:v-if可以和v-else-if、v-else一起使用,但要求其结构不能被“打断”——即,中间不能有其他元素
- 写法:
- v-show
- 写法:v-show="表达式"
- 适用于:切换频率较高的场景
- 特点:不展示的DOM元素被移除,仅仅是使用样式隐藏
注:使用 v-if 的时候,元素可能无法获取到,而使用v-show一定可以获取到。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> <script type="text/javascript" src="../Js/vue.js"></script> </head> <body> <div id="root"> <!-- <h2 v-show="1===1">条件渲染学习笔记</h2> --> <!-- <h2 v-show="true">条件渲染学习笔记</h2> --> <h2 v-show="isShow">v-show=条件渲染学习笔记</h2> <button @click="myShow">v-show</button> <hr> <h2>当前的n值是:{{n}}</h2> <button @click="n++">n++</button> <!-- <div v-show="n===1">Angular</div> <div v-show="n===2">React</div> <div v-show="n===3">Vue</div> --> <hr> <h3 style="color: chocolate;"> 注:v-if + v-show<br /> 1.使用频率高的用v-show,使用频率低的用v-if<br /> 2.v-if--在同时使用时,界面会判断所有v-if(判断所有v-if后才会结束)<br /> 3.在使用v-if时,可考虑同时使用v-if和v-else-if(条件满足,则return——认为是一组条件判断,中间不能有其他内容,否则将不打断)<br /> </h3> <div v-if="n===1">Angular</div> <div v-else-if="n===2">React</div> <div v-else-if="n===3">Vue</div> <div v-else>Angular + React + Vue</div> <hr> <h3 style="color: chocolate;"> 注:使用template模版<br /> 1.模版不会改变结构<br /> 2.template不能配合使用v-show<br /> </h3> <template v-if="n>=3"> <h4>template 学习</h4> <h4>爱死模版的尼</h4> </template> </div> </body> </html> <script type="text/javascript"> const vm = new Vue({ el: '#root', data: { isShow: true, n: 0, }, methods: { myShow () { this.isShow = !this.isShow }, }, }) </script>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!