首先vue.js请注意 2.1.0版本以上方可使用v-else-if
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js"></script> </head> <body> <div id="box"> <!--实例1 vue 2.1.0以上版本支持 v-if v-else-if --> <div v-if="type === 'a'"> a </div> <div v-else-if="type === 'b'"> b </div> <div v-else-if="type === 'c'"> c </div> <div v-else> not a/b/c </div> <hr /> <!--实例2 v-if / v-else--> <div v-if="type==='a'">ok!!!</div> <div v-else>no!!!</div> <hr /> <!--实例3 模板中使用v-if / v-else--> <my-form :login-type="logintype"></my-form> <button @click="togglefun">toggle logintype</button> </div> <script> var myform = { //template:"#myform" props:['logintype'], template:` <div v-if="logintype === 'username'"> <label>username</label> <input placeholder="enter your username" key="username-input"/> </div> <div v-else> <label>email</label> <input placeholder="enter your email address" key="email-input"/> </div> ` } var app = new vue({ el:'#box',// ().$mount("#box"); data:{ type:'c', logintype:'username' }, components:{ "my-form":myform }, methods:{ togglefun: function() { this.logintype = this.logintype === 'username'? 'email':'username'; } }, created:function (){ } }); </script> </body> </html>
页面展示如下:
vue.js下载:
以上这篇对vue v-if v-else-if v-else 的简单使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
Mac电脑使用:SourceTree每次操作都提示输入密码的解决方法
对element-upload二次封装文件图片上传,贼拉好使,不好使吃皮鞋。
LVS+keepalived实现高可用的DR模式负载均衡的搭建过程
丝域跨境:shopee日出百单卖家每天做什么?我们和他们的差距在哪里?
网友评论