vue v-if v-else-if v-else 的简单使用_template中v-if 实现else if-CSDN博客

本文链接：https://blog.csdn.net/elisunli/article/details/78677512

首先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>

页面展示如下：