（二点一）Vue指令实现简单的计算器

最新推荐文章于 2023-04-02 21:57:33 发布

cainiao_Lyx

最新推荐文章于 2023-04-02 21:57:33 发布

阅读量399

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/cainiao_Lyx/article/details/110563497

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里我们来实现一个简单计算器，来复习一下前面所说到的一些指令。
下面是程序代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>简单计算器</h1>
        <div>
            数A
            <input type="text" v-model="a">
        </div>
        <div>
            数B
            <input type="text" v-model="b">
        </div>
        <div>
            <button type="button" @click="handel">计算</button>
        </div>
        计算结果为:
        <div v-text="res"></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el:'#app',
            data:{
                a:'',
                b:'',
                res:''
            },
            methods:{
                handel:function () {
                    this.res = parseInt(this.a) + parseInt(this.b);
                }
            }
        })
    </script>
</body>
</html>

程序运行后如下：
在这里插入图片描述
分别输入12与13后点击计算按钮科的计算结果：

大家看代码，我们用到了双向数据绑定的v-model指令。
大家还看到<button type="button" @click="handel">计算</button>这里
@click是事件绑定的简单写法，完整写法为v-on：click，后面的值是处理的方法或者函数名。
你可以写成handel，也可以写成handel()，那这两种写法有什么区别呢？
区别就在去传参的时候，第一种写法只传一个默认参数$event，而后面那种写法，可以传更多的参数。
下面给一段示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div v-text="msg"></div>
        <div>
<!--            可以写成v-on：或者@-->
<!--            可以写成handle或者handle()-->
<!--            <button v-on:click="handle()">click</button>-->
            <button @click="handle">click</button>
<!--            传参&&传递事件对象-->
            <button @click="handle1(123,456,$event)">click1</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data:{
                msg: 0
            },
            // 专门写函数的地方
            methods:{
                handle:function(event) {
                    console.log(event.target.innerHTML);
                    this.msg ++;
                },
                handle1:function (p,q,event) {
                    console.log(p,q);
                    console.log(event.target.tagName);
                    this.msg++;
                }
            }
        })
    </script>
</body>
</html>

可以看到Vue对象里的methods属性用来定义处理函数的内容。
还有一点大家可以注意一下，用on事件名的方式绑定多个事件，只有最后一次绑定起作用：<button v-on="{ click: onClick, focus: onFocus, blur: onBlur }"></button>。
本次分享就到这里了。

cainiao_Lyx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（二点一）Vue指令实现简单的计算器

这里我们来实现一个简单计算器，来复习一下前面所说到的一些指令。下面是程序代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <h1>简单计算器</h1>
复制链接

扫一扫

专栏目录