SOURCE

new Vue({
  el:'#app',
  
  data:{
    items:10,
    show:true
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <!-- 条件判断 -->
  <p v-if='items>=20'>还有存货量为：{{ items }}</p>
  <p v-else-if='items<=10 && items>0'>快没有存货了，赶紧抢购吧</p>
  <p v-else>已经抢购一空</p>
  
  <!-- 当不想增加dom节点，又想让元素成组的做响应时，可以使用template -->
  <template v-if='show'>
    <p>这是第一个</p>
    <p>这是第二个</p>
  </template>
  
  <!-- 还可以使用v-show进行显示或者隐藏，但是v-show实际上是把元素的display属性设置为none -->
  <button @click='show=!show'>显示隐藏</button>
  <p v-show='show'>这是用v-show显示隐藏的</p>
</div>