vue v-if v-else-if v-else 的简单使用
2017-11-30 16:22
204 查看
首先vue.js请注意 2.1.0版本以上方可使用v-else-if
页面展示如下:
vue.js下载:https://github.com/vuejs/vue
<!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下载:https://github.com/vuejs/vue
相关文章推荐
- 对vue v-if v-else-if v-else 的简单使用详解
- vue.js 使用v-if v-else发现没有执行解决办法
- Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
- vue 模板的简单使用
- vuex 的简单使用
- axios在vue中的简单配置与使用
- 使用vue-router完成简单导航功能【推荐】
- vue学习-03--使用vue制作简单的todolist
- 详解在vue-cli项目下简单使用mockjs模拟数据
- 简单的vuex 的使用案例笔记
- Mybatis if else简单写法使用
- 使用 Vue.js 制作一个简单的调查问卷平台
- vuex 简单使用
- vue中使用axios(简单待续)
- vuex在vue-cli和webpack构建的项目中的简单使用
- 结合Vue使用的简单分页器
- axios在vue中的简单配置与使用
- laravel5.4+vue+element-ui配置及简单使用
- vue1.0中的watch的简单使用
- 使用Vue完成一个简单的todolist的方法