Vue.js的事件监听与条件判断

继续学习Vue,记录相关知识点。

事件监听

在前端开发中,需要经常和用户交互。这个时候就必须监听用户发生的事件,比如点击、拖拽、键盘事件等等。在Vue中使用v-on:click指令监听事件。这个东西其实之前用过。

其实不仅有v-on:click,还有keyup,监听按键抬起等事件。

当通过methods定义方法,以供@click调用时,需要注意参数的问题。如果该方法不需要额外参数,则方法后的括号可以不添加。但是注意,如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去。

如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。如果直接传入event,会导致vue先认为它是一个变量,然后发现没有这个变量,就会报错。

tips:如果函数需要参数,但是没有传入,那么函数的形参为undefined。

事件冒泡:当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。(百度百科)

vue中处理事件冒泡的方法时使用v-on修饰符。比如.stop阻止事件的冒泡(停止冒泡),.prevent阻止表单提交后的自动发送数据,因为如果我要进行其他处理后再进行传输,默认的传输就必须阻止(停止默认行为)。还有.keyCode.keyAilas,只当事件是从特定键触发时才触发回调。比如@keyup.enter就是只监听键帽抬起后的回车。.native用于自定义组件,监听组件根元素的原生事件。.once只触发一次回调(可用于阻止重复提交)。

需要多个修饰符的时候直接连着用。

条件判断

使用v-if判断这个东西要不要被渲染出来。值为true就渲染,为false就不渲染。与if-else语句类似,有v-if,也有v-else。v-else是找到离他最近的v-if,如果条件不满足则渲染v-else里面的东西,如果v-if满足了,那么v-else里面的东西就不渲染。此外还有v-else-if,用法类似。

1
2
3
4
<h2 v-if="score >= 90">优秀</h2>
<h2 v-else-if="score >= 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格</h2>

用户登录切换的案例

要做一个小切换选项,用户点击可以切换成邮箱登录或账号登录。

使用v-if和v-else就可以完成这个操作。设立两套渲染,然后按钮负责切换,设定一个状态变量判断当前是哪个,每次点击就把那个变量取反,让渲染变成另一套,就ok。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue登录切换</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" />
</span>
<span v-else>
<label for="useremail">用户邮箱</label>
<input type="email" id="useremail" placeholder="用户邮箱" />
</span>
<button type="button" @click="switchMode">切换类型</button>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
isUser: true,
},
computed: {

},
methods: {
switchMode() {
this.isUser = !this.isUser;
}
}
});
</script>
</body>
</html>

但是这样做有个小问题。如果在有输入内容的情况下切换了类型,会发现文字依然显示之前的内容。但是按道理讲是已经切换到另一个input元素去了,在另一个input元素中我们并没有输入内容,为什么会这样?因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重复创建新的元素。在这个案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用。如果不希望出现此类复用问题,可以给对应的input添加key,并且需要保证key的不同。

这样把代码改一下就可以了:

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号" key="username"/>
</span>
<span v-else>
<label for="useremail">用户邮箱</label>
<input type="email" id="useremail" placeholder="用户邮箱" key="useremail"/>
</span>
<button type="button" @click="switchMode">切换类型</button>
</div>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信