xinggevip

Vue2.x_1.2事件修饰符:once、prevent、stop
app.jsnew Vue({ el:"#vue-app", data:...
扫描右侧二维码阅读全文
15
2019/05

Vue2.x_1.2事件修饰符:once、prevent、stop

app.js

new Vue({
    el:"#vue-app",



    data: {
        age: 25,
        x: 0,
        y: 0,
        Z: 8,
    },

    methods:{
        add:function (num) {
            this.age+=num;
        },

        substract:function (num) {
            this.age-=num;
        },

        updateXY: function(event){
            this.x = event.offsetX;
            this.y = event.offsetY;
        },

        click: function(){
            alert('哈哈哈哈哈');
        },

        stopMoving: function (event) {
            event.stopPropagation();//阻止冒泡事件
        }
    },

    

})

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
    <div id="vue-app">
        <h1> Event </h1>
        <p>My age is {{ age }}</p>
        <!--<button v-on:click="age++">加一岁</button>-->
        <!--<button v-on:click="age&#45;&#45;">减一岁</button>-->

        <button v-on:click.once="add(5)">加一岁</button>
        <button v-on:click="substract(5)">减一岁</button>

        <div id="canvas" v-on:mousemove="updateXY">
            {{ x }} , {{ y }} - <span v-on:mousemove.stop="">Stop Moving</span>
            <!--阻止冒泡事件-->
        </div>
        <!--组织a标签跳转,只执行a标签的点击事件-->
        <p><a v-on:click.prevent="click" href="http://www.thenetninja.co.uk">点我</a></p>

    </div>



    <script src="app.js"></script>
</body>
</html>

CSS

#canvas{
    width: 700px;
    height: 400px;
    border:1px solid red;
    text-align: center;
    line-height: 400px;


}

演示链接

http://hao.qiangssvip.com/vuestudy/Lesson02

Last modification:May 21st, 2019 at 09:21 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment