v-if和v-show

淺唱寂寞╮ 提交于 2019-12-01 07:14:58

v-if和v-show:创建,删除,显示,隐藏

HTML和效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜀云泉</title>
    
    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>
<body>
    
    <!-- 这个div就是MVVM中的V,View -->
    <div id="app">

        <input type="button" value="点我" @click="flag=!flag">
 
        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>

    </div>


    <script>
        // 这个vm就是MVVM中的VM,ViewModel
        var vm=new Vue({
         el: '#app',
        //  这个data就是MVVM中的M,Model
         data: {
             flag:true
         },
         methods: {
         }  

        })

    </script>

</body>
</html>

效果图:点击按钮,下面的会消失,再点击会出现

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!