v-show v-if

v-show 和 v-if 的值都是布尔值,true或false,

不同的是

  v-show 是采用css的 display:none;和 display:block;来实现显示和隐藏元素的

  v-if 是直接把元素移除掉或者添加到页面上的

<!-- v-show v-if -->
    <!-- 
        v-show 使用display:none;隐藏元素
        v-if  直接移除页面元素

        它们的值都是布尔值 true false
     -->
    
    <div id="app">
        <p class="error" v-show="!msg">错误信息</p>
        <textarea name="" id="" cols="30" rows="10" v-model="msg"></textarea>
        <p><button v-show="msg">submit</button></p>

        <p>{{$data | json}}</p>
    </div>

<script>
    
    new Vue({
        el:"#app",
        data:{
            msg:''
        }
    })
</script>
原文地址:https://www.cnblogs.com/chefweb/p/6823786.html