VUE学习——指令

1.v-if

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法：v-if="expression"

这里的expression返回的是一个boolean值，false或者true。。

往往v-if指令与template标签连用，比如下面这段代码：

<template v-if "menuFlag == '1'">服务场景</template>
<template v-if "menuFlag == '2'" >活动场景<template>

当menuFlag == ‘1’为true时，就会在页面上显示服务场景，为menuFlag == '2'时就会显示活动场景。。

并且为false的标签不会渲染到html中。。

 

2.v-show

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML。

<template v-show "menuFlag == '1'">服务场景</template>
<template v-show "menuFlag == '2'" >活动场景<template>

当menuFlag == ‘1’为true时，就会在页面上显示服务场景，为menuFlag == '2'时就会显示活动场景。。这和v-if是一样的，但是在html中体现就不一样了。。在Chrome控制台，可以看到元素被设置了style="display:none"样式。