zoukankan      html  css  js  c++  java
  • vue6-条件渲染

    使用v-if  v-else控制该显示那个name还是email div,如果不加key的话,就会复用input,加了后name那个input就不会被email复用。

    v-show与v-if的区别是v-show即使为false只是不显示,但是DOM节点是存在的,而v-if为falseDOM节点是不存在的。

    <!DOCTYPE html>
    <html>
        <head>
            
            <meta charset="utf-8">
            <title>vue1</title>
            <script src="vue.js"></script>
            <link rel="stylesheet" type="text/css" href="vue.css">
        
        </head>
        <body>
            
            
            <div id="app">
    
                <div v-if="flag" key="sss">
                    <p>name</p>
                    <input type="text" >
    
    
                </div>
                <div v-else>
                    <p>email</p>
                    <input type="text" >
    
    
                </div>
    
    
                <button @click="submit">submit</button>
    
    
            </div>    
            
            
            <script>
                var app=new Vue({
                    el:"#app",
                    data:{
                        msg:"",
                        flag:true
                 
                    },
                    methods:{
                        submit:function(){
                            this.flag=!this.flag
    
                        }
                    }
                    
                })        
            </script>
        </body>
    </html>
  • 相关阅读:
    ngTemplate
    HTML5
    angular指令
    todo
    调试语句
    route attribute in webapi
    ngModelController
    angularjs中的事件
    删除IE input 下的小叉叉
    《python网络数据采集》读后感 第八章:自然语言处理
  • 原文地址:https://www.cnblogs.com/JinweiChang/p/12626629.html
Copyright © 2011-2022 走看看