new Vue({
el:"#app",
data:{
items:30,
show:true
}
})
<!-- 条件渲染 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p v-if ="items > 10">有库存{{items}}</p>
<p v-else-if ="items <= 10 && items > 1">快买呀，没货了！</p>
<p v-else ="items < 1">对不起，没货了</p>
<div v-if="show">
<p>第一个</p>
<p>第二个</p>
</div>
<!--此时，使用一个div容器来同时影响两个<p>标签-->
<template v-if="show">
<p>第一个</p>
<p>第二个</p>
</template>
<!--
使用div容器和template的区别：
在浏览器中点击检查元素或者查看源代码时，<div>标签会显示出来，而<template>标签则不显示（显示为不存在）
既想要用同一个容器来操作影响多个标签，又想要该容器不显示在dom结点中：使用template标签实现。
-->
<button @click="show = !show">点击显示隐藏 </button>
<p v-show="show"> 我用show显示</p>
<!--
注：
v-if与v-show的相同点和不同点：
相同点:
v-if与v-show都可以判断是否显示内容
不同点：
v-if若不显示时，其dom结点就不存在
v-show若不显示时，其dom结点仍存在，但通过css属性影藏了，例如:display:none
-->
</div>