当前位置: Vue教程 > 03-流程控制 > 阅读正文

v-if判断语句

2021.6.2.   1022 次   1430字

if -- else是最基本的流程控制语句, 主要包括 if, if else, 以及 if else if , 以及 if嵌套, 用法于 JavaScript 相差不大

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>vue的if-else例子</h2>
<div id="app">
	<p v-if="name=='张三'">我的名字叫张三</p>
	<p v-else-if="name=='李四'">我的名字叫李四</p>
	<p v-else>我不是张三也不是李四</p>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			name:'张三',
			age:18
		}
	});
</script>

template模板

在 vue 中, 如果想使用 if else 控制多个html语句, 使用 vue 特有的 template 模板

你需要注意, template 模板默认是隐藏的, display:none, 在模板激活前都看不见

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>vue的template模板实例</h2>
<div id="app">
<p>	多条语句是否显示,在template中</p>
<hr>
<template v-if="ss2">
	<h1>这是第一个语句</h1>
	<p>这是第二个语句</p>
	<hr>
</template>
<template v-else>
	多个不显示的语句
	<p>哈哈哈</p>
	<h1>嘿嘿</h1>
</template>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			ss2:true
		}
		});
</script>

key参数

当前假设你有 2 个 input , 分别是输入用户名 和 邮箱, 当用户切换登录时仅仅切换placeholder, 而在 input 中增加一个 key 参数, 就不再保留前面输入的数据.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>vue-if的key参数实例</h2>
<div id="app">
<template v-if="loginType=='username'">
	<hr>
	  <label>Username</label>
	  <input placeholder="Enter your username" key="username-input">
	<hr>
</template>
<template v-else>
	  <label>Email</label>
	  <input placeholder="Enter your email address" key="email-input">
</template>
<p><button v-on:click="changeType">切换登录</button></p>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			loginType:"username"
		},
		methods:{
			changeType(){
				if(this.loginType=='username'){
					this.loginType = 'email';
				}else{
					this.loginType='username';
				}
			}
		}
		});
</script>

本篇完,还有疑问?

加入QQ交流群:11500065636 IT 技术交流群