对vue v-if v-else-if v-else 的简单使用详解

2019-11-19 12:49:02

字体：大中小

来源：转载

供稿：网友

首先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 v-if v-else-if v-else