Vue的内部指令 v-on

最新推荐文章于 2023-06-08 11:50:10 发布

机灵的小飞机

最新推荐文章于 2023-06-08 11:50:10 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/weixin_42354407/article/details/104362906

版权

v-on

v-on 的省略缩写 @
v-on 事件的监听可以用 v-on 指令来监听DOM事件来触发js代码
话不多说我们直接来一个最简单的示例

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <button v-on:click='add'>加分</button>
        <button v-on:click='dele'>减分</button>
        <input type="text" v-on:keyup.enter="onEnter" v-model="count2">
    </div>
    <script type="text/javascript">
    const app = new Vue({
       el:"#app" , 
       data:{
            count:1 , 
            count2:'' 
       } , 
       methods:{
           add:function(){
               this.count++ ; 
           } , 
           dele:function(){
               this.count-- ; 
           } , 
           onEnter:function(){
               this.count = this.count +parseInt(this.count2) ;
           }
       }
    })
    </script>
</body>
</html>

详细解释：

v-on 可以监听各种事件例如：click keyup 等等

核心代码：

<button v-on:click='addCount'>加分<button/>

注：

当我们写 js 代码时候，让我们在输入框中输入一个数，然后与已知的数相加
count 是已知数， count2 是我们输入框中用户自动输入的数

add:function(){
	this.count = this.count + this.count2 ;
}

这里会有一个小 BUG 我们需要将输入框中的字符串转化成数字，使用 parseInt（）方法。
文本框中的数字会默认转变成字符串，所以需要进行整数转化。
我们也可以通过键值来定义键盘事件

机灵的小飞机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫