vue v-if v-else-if v-else 的简单使用

来源：互联网发布：centos中文乱码编辑：程序博客网时间：2024/06/15 00:30

首先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下载：https://github.com/vuejs/vue

阅读全文

0 0