您的位置：首页 > 产品设计 > UI/UE

Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM（三）

2018-01-31 11:45 1036 查看

后端对于写 if..else..或者 if..else if..else..的条件语句相当的easy，而对于我们的Vue.js来说，这种条件判断夹杂在DOM元素上，也是相当的轻松。

直接上完整demo，在逐一进行讲解

<html>

<head>
<title>v-if 条件指令渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<div id="app">
<div v-if="ok">
现在你可以看到我
</div>
<div v-else>
现在你看不到我
</div>
</div>

<div id="app2">
<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>
非 A/B/C
</div>
</div>
<div id="app3">
<template v-if="loginType==='username'">
<label>用户名</label>
<input placeholder="请输入用户名" v-model="name">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="请输入邮箱" v-model="email">
</template>
<button value="sumbit" @click="login">{{message}}</button>
<br/>
<button @click="switchType">切换登录类型</button>
</div>

</body>
<script>
var app = new Vue({
el: '#app',
data: {
ok: true
}
})
var app2 = new Vue({
el: '#app2',
data: {
type: 'A'
}
})

var app3 = new Vue({
el: '#app3',
data: {
loginType: "username",
message: '用户名登录',
name: '',
email: ''
},
methods: {
switchType: function () {
if (this.loginType === 'email') {
this.loginType = 'username'
this.message = '用户名登录'
} else {
this.loginType = 'email'
this.message = '邮箱登录'
}
},
login: function () {
if (this.loginType === 'username' && this.name === 'appleyk') {
alert('登录成功！')
} else if (this.loginType === 'email' && this.email === '123@qq.com') {
alert('登录成功！')
} else {
alert('登录失败！')

}

}
}
})
</script>

</html>

一、div绑定变量值，如果变量值等于true，div内容显示，如果等于false，不显示

（1）DOM

（2）数据绑定

注意，被vue条件指令渲染的div，如使用v-if 组合 v-else，请务必保证被渲染的两个div是连续的、紧挨着的，否则if..else..渲染失败

默认的ok值等于true，因此，浏览器中，我们会看到

如果，将变量ok的值设为false（浏览器调试模式F12，打开Console控制台），我们会发现

vue渲染DOM是双向的，也就是如果你改变了vue变量的值，会实时更新到对应的DOM元素上

二、使用v-if..v-else-if..v-else的条件指令渲染DOM，匹配 ‘A’‘B’‘C’

（1）DOM

（2）数据绑定（数据模板）

type初始值绑定'A',因此，浏览器中显示

同理，JavaScript控制台重新设定type的值后，随后我们发现相应的DOM数据已更新

三、条件指令应用简单案例 -- 不同登录方式的实现

（1）DOM

使用template模板的好处就是，其指向相同的DOM元素input，当我们切换登录类型时，input标签不会被替换，替换的是placeholder和其v-model绑定的数据，如果想要以示区别，从头开始渲染input，那么需要在input加上key属性，不同的key属性表示input是两个独立的元素，当然，这里我们不会采用从头渲染的方式，以减少性能开销。

click绑定事件(简写) ： @click 等同于 v-on:click

（2）数据模板

我们先来看一下，以用户名的登录方式进行登录验证是什么样的

如果输入的不是'appleyk'的话，则会

我们切换到登录方式为 - - 邮箱登录，试试

我们输入邮箱名，进行登录验证

每天一小点，日积月累。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航