跟着技术胖学Vue2.0—第五课：v-on：绑定事件监听器

最新推荐文章于 2024-05-21 18:43:24 发布

哎呦喂iuv

最新推荐文章于 2024-05-21 18:43:24 发布

阅读量612

点赞数

分类专栏： vue2.x学习记录文章标签： html 前端 css3

本文链接：https://blog.csdn.net/ll282991823/article/details/122331008

版权

vue2.x学习记录专栏收录该内容

19 篇文章 4 订阅

订阅专栏

学习回顾

课程主要内容

1、v-on绑定button实现加分减分

2、v-on绑定键盘回车键实现加分

操作步骤

1、v-on绑定button实现加分减分

第一步，老规矩，在index.html中新建一个li，并在example里新建一个v-on.html用来存储我们的实例。

第二步，在html中需要一个span显示得分，以及一个加分按钮和一个减分按钮。当点击加分按钮时，span中的分数会依次加1；当点击减分按钮时，span中的分数会依次减1。

v-on用来绑定事件，分别绑定加分和减分事件，点击的时候触发，所以跟click。注意，v-on:可以等价于@，如下：

<div id="app">
        <span>当前的得分为：{{score}}</span>
        <p>
            <button v-on:click='addScore'>加分</button>
            <button @click='minusScore'>减分</button><br/>
        </p>
    </div>

具体的两个方法是写在methods里的，这个是Vue的构造器，和data并列。如下：

data:{
       score:'1'
     },
methods:{
                addScore:function(){
                    this.score++;
                },
                minusScore:function(){
                    this.score--;
                }
      }

下面是结果图，点击按钮，上面的得分就会跟着变化啦

2、v-on绑定键盘回车键实现加分刚刚是v-on绑定button，此外，课程中还说到绑定键盘的按键。要实现的功能是：当在键盘中输入数字后，然后按回车键，就会在当前分数上加上文本框中输入的数字。

具体怎么实现呢？

首先，我们在按钮下面新建一个文本框，这里需要绑定一个回车键事件。另外，要获取文本框中的数字，也需要对其进行绑定。具体操作如下面的代码：

<input type="text" v-on:keyup.enter='onEnter' v-model='secondScore'>

上面的keyup.enter就是绑定的回车键，当然这里的enter也可以用键盘上回车键对应的值来表示，13代表回车键，因此也可以用keyup.13来绑定。后面的v-model则是绑定的文本框中的数字，这是下一节课的内容，所以也没有细讲，我就跟着用啦。最后记得要在data中写上我们绑定的这个数据哦，并给定一个默认的初始值。

接下来就是写onEnter事件啦，具体如下：

onEnter:function(){
                    this.score=this.score+parseInt(this.secondScore);
                }

这里要注意的是，一定要记得用parseInt，如果不用这个的话，那么我们在文本框中输入的数字是字符串，相加就会得到错误的结果。

下面是结果图：

总结

由于今天的代码稍微有点散乱，所以在最后一起放出来，比较好对比着查看。

<body>
    <h1>v-on实例</h1>
    <hr>
    <div id="app">
        <span>当前的得分为：{{score}}</span>
        <p>
            <button v-on:click='addScore'>加分</button>
            <button @click='minusScore'>减分</button><br/>
            <input type="text" v-on:keyup.enter='onEnter' v-model='secondScore'>
        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                score:'1',
                secondScore:'1'
            },
            methods:{
                addScore:function(){
                    this.score++;
                },
                minusScore:function(){
                    this.score--;
                },
                onEnter:function(){
                    this.score=this.score+parseInt(this.secondScore);
                }
            }            
        })
    </script>
</body>

今天的学习到此为止，学了两节课，满足哈哈！