vue模板语法之分支循环结构

1、v-if：

（1）原理：

v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素；v-if后面的条件为false时，对应的元素以及其子元素不会渲染，也就是说根本没有对应的标签出现在DOM中。示例如下：

效果图：

初始状态下为true，显示内容

当在控制台改变对应的状态值时，则隐藏以上的内容

2、v-if与v-else结合使用

效果图：

(当isShow的状态值为true时的效果）

(当修改isShow的状态值为false时的效果）

关于v-else的小结：

1、v-else 必须跟在v-if指令之后，不然不起作用；

2、如果v-if指令的表达式为true，则else元素不显示；如果v-if指令的表达式为false，则else元素显示在页面上；

3、v-if与v-else与v-else结合使用

效果图：

也可以利用计算属性来实现对应的效果：

登录切换小案例：

4、v-if与v-show的区别：

v-show指令会渲染他身后表达式为false的元素，这样的元素上会添加css代码：

style="display:none"; 

效果图：

（为true的状态下，使用v-show，v-if都可以出现）

（为false的状态下，使用v-show的标签多了行内样式

display：none）

区别：

（1）v-if是决定是否创建DOM，而v-show则是DOM始终存在，只是改变了显示样式；也可以这么理解：

v-if控制元素是否渲染到页面

v-show控制元素是否显示（已经渲染到了页面）

（2）v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。