美文网首页
vue零基础开发011——条件渲染

vue零基础开发011——条件渲染

作者: 文朝明 | 来源:发表于2019-11-19 16:17 被阅读0次
    
    <head>
        <meta charset="utf-8" />
        <title>条件渲染</title>
        <script src="./vue.js"></script>
    
    </head>
    <body>
    <div id="app">
    <div v-if="show==='a'"  data-test="v-if">用户名<input  key="un"/></div>
    <div v-else-if="show==='b'"  data-test="v-else-if">密码<input key="pw"/></div>
    <div v-else  data-test="v-else">邮箱<input key="mail"/></div>
    <!--<div v-else="show"  data-test="v-else">others</div>-->
    <div v-show="show"   data-test="v-show">{{message}}</div>
    </div>
        <script>
        var vm=new Vue({
        el:"#app",
        data:{
        show:'a',
            message:"h w"
        },
        })
        </script>
    </body>
    </html>
    
    
    条件渲染

    相关文章

      网友评论

          本文标题:vue零基础开发011——条件渲染

          本文链接:https://www.haomeiwen.com/subject/hwtgictx.html