七：事件处理

最新推荐文章于 2022-12-11 10:55:00 发布

吱吱不倦小子

最新推荐文章于 2022-12-11 10:55:00 发布

阅读量159

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/u013109501/article/details/114273166

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件处理</title>
</head>
<body>
<div id="example">
    <h1>1.绑定监听</h1>
    <button v-on:click="test1">test1</button>
    <!--参数绑定-->
    <button v-on:click="test2('acb')">test2</button>
    <!--获得button文本-->
    <button v-on:click="test3">test3</button>
    <button v-on:click="test4(123,$event)">test4</button>

    <h1>2.事件修饰符</h1>
    <!--阻止事件的冒泡-->
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>

    <!--阻止事件的当前行为-->
    <a href="www.baidu.com" @click="test7.prevent">去百度</a>
    <h1>3.按键修饰符</h1>
    <input type="text" @keyup.enter="test8">
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#example',
        data:{
            test1(){
                alert('test1')
            },
            test2(msg){
                alert(msg)
            },test3(event) {
                alert(event.target.innerHTML)
            },test4(number,event) {
                alert(number+'----'+event.target.innerHTML)
            },test5(){
                alert('out')
            },test6(){

                alert('inner')
            },test7(event) {
                alert('点击了')
            },test8(event){
                // if(event.keyCode==13){
                //     alert(event.target.value)
                // }
                alert(event.target.value)
            }
        }
    });

</script>

</body>
</html>

吱吱不倦小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七：事件处理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07事件处理</title></head><body><div id="example"> <h1>1.绑定监听</h1> <button v-on:click="test1">test1.
复制链接

扫一扫