Vue学习笔记：条件渲染

 v-show&＃61;"false"就是隐藏

使用v-if做渲染&＃xff0c;如果为false&＃xff0c;它直接把结构都干掉了

实现一功能&＃xff1a;页面上有一个标题n&＃xff1b;下面有个按钮&＃xff1b;如果按下就让n&＃43;&＃43;;当n&＃61;&＃61;&＃61;&＃xff1f;时显示不同的div

实现一个效果&＃xff0c;当n&＃61;&＃61;&＃61;1时&＃xff0c;实现三个div,三个div都要用到v-show,代码重复率太高了&＃xff0c;如果在外面套一个div,确实可以一行实现但是这样写影响了结构&＃xff0c;后面如果我们要用css,可能实现不了一些效果

 但是可以用template&＃xff08;模板&＃xff09;&＃xff0c;这样在页面加载时&＃xff0c;会把template去掉&＃xff0c;这样就不影响结构了。

 注意的是&＃xff1a;template 只能与v-if一起使用&＃xff0c;不能跟v-show一起使用
总结 

条件渲染&＃xff1a;

                            1.v-if

                                        写法&＃xff1a;

                                                (1).v-if&＃61;"表达式"

                                                (2).v-else-if&＃61;"表达式"

                                                (3).v-else&＃61;"表达式"

                                        适用于&＃xff1a;切换频率较低的场景。

                                        特点&＃xff1a;不展示的DOM元素直接被移除。

                                        注意&＃xff1a;v-if可以和:v-else-if、v-else一起使用&＃xff0c;但要求结构不能被“打断”。

                            2.v-show

                                        写法&＃xff1a;v-show&＃61;"表达式"

                                        适用于&＃xff1a;切换频率较高的场景。

                                        特点&＃xff1a;不展示的DOM元素未被移除&＃xff0c;仅仅是使用样式隐藏掉

                            3.备注&＃xff1a;使用v-if的时&＃xff0c;元素可能无法获取到&＃xff0c;而使用v-show一定可以获取到。