vue学习：v-on 绑定HTML事件-CFANZ编程社区

vue学习：v-on 绑定HTML事件

绑定单击事件
v-on:click="…“或者@click=”…"，代码如下

<div id="app">
     <!-- 事件中直接写js片段 -->
     <button v-on:click="num++">点赞</button>
     <!--  事件指定一个回调函数，必须是Vue实例中定义的函数-->
     <button @click="cancle">取消</button>
     <h1>有{{num}}个点赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            num:1,
            link:"http://www.baidu.com"
        },
        methods: {
            cancle() {
                this.num--;
            },
            hello(){
                    alert("我是弹窗");
                }
        }
    });
</script>

事件修饰符
冒泡到父元素举例：比如父子元素都绑定了一个单击之后的弹窗事件，如果点击子元素弹窗会弹出两次。
解决：@click.stop
默认事件举例：超链接标签绑定了单击弹窗事件，如果点击超链接标签在显示弹窗后会再跳转链接。
解决：@click.prevent

<div style="border: 1px solid red;padding: 20px" @click="hello">
    大div
    <div style="border: 1px solid blue;padding: 20px" @click.stop="hello">
        小div<br/>
        <a v-bind:href="link" @click.prevent.stop="hello">去百度</a>
    </div>
</div>

按键修饰符
@keyup.常用按键名（up/dowen/ctrl…）
@keyup.keyCode（键码，如：@keyup.13）
@click.ctrl组合键，ctrl+单击

<input type="text" v-model="num" @keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br/>

0 条评论