八、v-on绑定事件监听器

最新推荐文章于 2023-05-03 14:33:24 发布

大话JAVA的那些事

最新推荐文章于 2023-05-03 14:33:24 发布

阅读量268

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/newbie_907486852/article/details/83421769

版权

Vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on 实例</title>
    <!--引入Vue.js-->
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on实例</h1>
    <hr>
    <div id="app">
        本场比赛得分： {{count}}<br/>
        <button v-on:click="jiafen">加分</button>
        <button @click="jianfen">减分</button>
        <br>
        <hr/>
        v-model="secondCount":表示绑定input中的数据到secondCount这个变量
        <br>
        <input type="text" @keyup.enter="onEnter" v-model="secondCount">
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                count:1,
                secondCount:1
            },
            methods:{//表示声明一些方法
                jiafen:function(){//定义方法名
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                },
                onEnter:function(){
                    this.count=this.count+parseInt(this.secondCount);
                }
            }
        })
    </script>
</body>
</html>

大话JAVA的那些事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
八、v-on绑定事件监听器

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
复制链接

扫一扫

专栏目录