事件处理
| 事件 | 释义 |
|---|---|
| input | 当输入框进行输入的时候 触发的事件 |
| change | 当元素的值发生改变时 触发的事件 |
| blur | 当输入框失去焦点的时候 触发的事件 |
change 和 blur 最本质的区别：
如果输入框为空，失去焦点后，change不会触发，但是blur会触发
过滤案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤案例title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="box">
<p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容：">p>
<ul>
<li v-for="data in newList">{{data}}li>
ul>
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
this.newList = this.dataList.filter(item => {
// item.indexOf(this.myText)：输入框中输入的字符串在筛选元素中的索引
return item.indexOf(this.myText) > -1 // 返回索引大于1的元素：>-1 就表示包含在其中
})
},
},
})
script>
html>
事件修饰符
| 事件修饰符 | 释义 |
|---|---|
| .stop | 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） |
| .self | 只处理自己的事件，子控件冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="box">
<ul @click.self="handleUl">
<li v-for="data in dataList" @click.stop="handleLi">{{data}}li>
<li><a href="http://www.baidu.com">不拦截a>li>
<li><a href="http://www.baidu.com" @click="handleLink($event)">点击拦截a>li>
<li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截a>li>
<li><button @click.once="test">只执行一次button>li>
ul>
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: ['1','22','333','4444']
},
methods: {
handleUl(ev){
console.log('ul被点击了')
},
handleLi(){
console.log('li被点击了')
ev.stopPropagation() // 点击事件停止 冒泡（向父组件传递时间）
},
handleLink(ev){
ev.preventDefault()
},
test(){
alert('只触发1次')
}
}
})
script>
html>
事件冒泡
阻止事件冒泡
阻止链接跳转+只执行1次
按键修饰符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按键修饰符title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
head>
<body>
<div id="box">
<input type="text" @keyup="handleKey1">
<input type="text" @keyup.enter="handleKey2">
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
dataList: ['1', '22', '333', '4444']
},
methods: {
handleKey1(ev) {
console.log('按下了' + ev)
// if (ev.keyCode==13){
// console.log('回车键被按下了')
// }
},
handleKey2(ev) {
console.log('按下了回车键')
}
}
})
script>
html>
