v-if和v-show的用法

​

在观察做搜索框组件的清除键时，对于清除键的隐藏（即有内容时出现，没内容时隐藏），一开始采用的是检听器语法，通过检测input的值是否为空值，通过一个函数更改button的display属性，来完成这项任务。但是在阅读vue的语法过后我看到了更加简单的方法，即通过v-if的语法进行button的渲染。（当然这里也可以用v-show的语句）

       watch: {
    value(newval, oldval) {
      console.log(newval, oldval);
      if (newval === "") {
        this.judgement();
      }
    }
  },
  methods: { 
  judgement() {
      console.log(this.value);
      if (this.value) {
        document.getElementById("cleared").style.display = "none";
      }
    }
  }，                              
  //监听器方法
      <button id="cleared" class="cleared" @click="clear()" v-if='value!==""'></button>  
      //v-if改写后

由此观之，所以在某些情况下合理利用v-if的语法是可以使代码量更为简明的

下面是v-if和v-show语法的具体区别讲解

v-if是条件优先的渲染，在满足条件才会渲染出条件块内的组件（倘若初始渲染时条件为假，则不渲染），并且在条件改变时对其中组件会进行销毁，而且可以同v-else-if语句联用，在不同的条件下改变渲染的方式。

v-show则是渲染优先，不管是否符合条件都会进行渲染，只是根据条件的真假更改css的display属性。你仍然可以在css中用函数去改变他的display属性，进行隐藏和渲染的更改.