vue.js中的事件修饰符.self的用法。

来源：互联网发布：行业利润率算法编辑：程序博客网时间：2024/09/21 11:22

.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>

阅读全文

0 0