.self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>self</title>
    <script src="vue.js"></script>
    <!--'''''''''''''''''''请自行引入vue.js-->
</head>
<style type="text/css">
    * {
        margin: 0 auto;
        text-align:center;
        line-height: 40px;
    }
    div {
        width: 100px;
    }
    #obj1 {
        background: deeppink;
    }
    #obj2 {
        background: pink;
    }
    #obj3 {
        background: hotpink;
    }
    #obj4 {
         background: #ff4225;
     }
</style>
<script src="vue.js"></script>
</head>
<body>
<!--点击obj4的时候会分别显示： obj4、 obj3、  obj1；
.self会监视事件是否是直接作用到obj2上，若不是，则冒泡跳过该元素，-->
<div id="content">
    <div id="obj1" v-on:click="doc">
        obj1
        <div id="obj2" v-on:click.self="doc">
            obj2
            <!--只有点击obj2才可以出发其点击事件。-->
            <div id="obj3" v-on:click="doc">
                obj3
                <div id="obj4" v-on:click="doc">
                    obj4

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var content = new Vue({
        el: "#content",
        data: {
            id: ''
        },
        methods: {
            doc: function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>
</body>

</html>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue