vue(10)v-if v-show v-else

1.v-if=""和v-show=""在""中的值如果是true则html元素可见，为false则元素不可见。v-if和v-show的区别是v-if不显示元素的时候是直接删除这个元素，v-show不显示是用css的display设置为none元素还是在的。

<template>

    <div>

      <button @click="isShow=!isShow">显示/隐藏</button>

      <div v-if="isShow">

          this is a test

      </div>

       <div v-show="isShow">

          this is a test

      </div>

    </div>

</template>

<script>

export default {

   name:"App",

   data:function(){

       return {

         isShow:true

       };

   },

   computed:{

       

   },

   methods:{

      

   }

}

</script>

<style scoped>

</style>

 

2.v-if可以和v-else可以嵌套着一起使用，实现true的时候显示一个元素，else则显示另外一个元素

 <button @click="isShow=!isShow">显示/隐藏</button>

      <div v-if="isShow">//isShow为真时显示这个div

          this is a test

      </div>

       <div v-else>//为假时显示这个div

          this is a test 111111111

      </div>

也可以使用v-if v-else-if ... v-else多重嵌套使用