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>