美文网首页
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