vue常用命令v-show和v-if


<html>
    <head>
        <meta charset="utf-8" />
        <title>v-show和v-if</title>
    </head>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script>
        window.onload = function(){
            //配置是否允許檢查代碼,方便調試,生產環境中設置爲false
            Vue.config.devtools = true;  //檢查代碼
            Vue.config.productioinTip = false;  //有強迫症的,可以關掉生產中的提示信息
            let vm = new Vue({
                el: "#div1",
                data:{
                    flag:true
                },
                methods:{
                    change(){
                        this.flag = !this.flag;
                    }
                }
            });
        }
    </script>
    
    <body>
        <div id="div1">
            <button v-on:click="flag=!flag">隱藏</button>
            <hr>
            <div style="width: 100px;height: 100px;background-color: gray" v-show="flag">div</div>
        </div>
    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章