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

时间：2022-06-25 15:35:09 编辑：袖梨来源：一聚教程网

首先vue.js请注意 2.1.0版本以上方可使用v-else-if

<meta charset="UTF-8">
<title></title>
<script src="../vue.js"></script>
 
 
 
<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>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"92c4e55c5bf2e7f5","version":"2025.3.0","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"09a15e901f154c8c900d5950c76ccb92","b":1}" crossorigin="anonymous"></script>

页面展示如下：

vue.js下载：https://github.com/vuejs/vue

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程