标签：v-on 选项 出现 一起 node 结合 vue mod nbsp
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式"
示例：
<div id="app"> <button v-on:click="show = !show">点我呀</button> <br> <h1 v-if="show"> 看到我啦？！ </h1> <h1 v-show="show"> 看到我啦？！show </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { show: true } }) </script>
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
<ul>
<li v-for="(user, index) in users" v-if="user.gender == ‘女‘">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
效果：
只显示女性用户信息
你可以使用 v-else
<div id="app"> <h1 v-if="Math.random() > 0.5"> 看到我啦？！if </h1> <h1 v-else> 看到我啦？！else </h1> </div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div id="app"> <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span> <h1 v-if="random >= 0.75"> 看到我啦？！if </h1> <h1 v-else-if="random > 0.5"> 看到我啦？！if 0.5 </h1> <h1 v-else-if="random > 0.25"> 看到我啦？！if 0.25 </h1> <h1 v-else> 看到我啦？！else </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { random: 1 } }) </script>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
演示：
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
示例：
<div id="app"> <!--事件中直接写js片段--> <button v-on:click="show = !show">点击切换</button><br/> <h1 v-if="show"> 你好 </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ show:true } }) </script>
代码：
标签：v-on 选项 出现 一起 node 结合 vue mod nbsp
原文地址：https://www.cnblogs.com/Tunan-Ki/p/11867807.html
