ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

事件处理

2022-04-12 18:31:40  阅读:339  来源: 互联网

标签:事件处理 -- 修饰符 事件 ev data 冒泡


事件释义
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>
<!-- <p><input type="text" v-model="myText" @change="handleInput" placeholder="请输入要筛选的内容:"></p> -->
<!-- <p><input type="text" v-model="myText" @blur="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="handleUl">-->
    <ul @click.self="handleUl">
<!--        <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
        <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" v-model="myInput" @keyup="handleKey">-->
    <!--    <input type="text" v-model="myInput" @keyup.13="handleKey">-->
    <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>

 

标签:事件处理,--,修饰符,事件,ev,data,冒泡
来源: https://www.cnblogs.com/zhaoyuanshi/p/16136405.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有