模版--v-if、v-show

v-if

指令用于条件渲染。当v-if 指令的表达式的值为真时，对应的元素会被渲染到DOM中。如果表达式的值为假，该元素则不会被渲染

<div id="app">
    <h1 v-if="showMessage">你好，世界！</h1>
</div>


var app = new Vue({
  el: '#app',
  data: {
    showMessage: true
  }
})

 如果showMessage 的值为true，那么<h1> 标签会显示在页面上

 

v-show

是另一种用于控制元素显示与隐藏的指令

 

区别：

v-show 适用于需要频繁切换显示状态的元素，因为它避免了不必要的DOM操作，可能会带来更好的性能表现。相比之下，v-if 更适合于条件不经常改变的情况