zoukankan      html  css  js  c++  java
  • v-if和v-show

    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>

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

  • 相关阅读:
    数据--第53课
    数据--第52课
    数据--第51课
    标准模板库中的优先队列(priority_queue)
    进程的定义
    进程的基本概念
    循环不变式
    插入排序
    模板声明
    标准模板库中的队列(queue)
  • 原文地址:https://www.cnblogs.com/xtxt1127/p/11667217.html
Copyright © 2011-2022 走看看