脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue计算器

Vue实现简单计算器

 更新时间：2021年01月20日 11:32:43   作者：河软小宝  
这篇文章主要为大家详细介绍了Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现简单计算器的具体代码，供大家参考，具体内容如下

案例需求

案例思路

1、通过v-model 指令 实现数值A和数值B的绑定
2、给计算按钮绑定事件，实现计算逻辑
3、将计算结果绑定到对应位置

实现静态页面

<div id='app'>
    <h1>简单计算器</h1>
    <div><span>数值A:</span><span><input type="text" v-model='a'></span></div>
    <div><span>数值B:</span><span type="text" v-model='b'></span></div>
    <div><button>计算</button></div>
    <div><span>计算结果</span><span></span></div>
</div>

导入Vue

<script type="text/javascript" src="js/vue.js"></script>

为静态页面添加指令

<div id='app'>
    <h1>简单计算器</h1>
    <div><span>数值A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">计算</button>
    </div>
    <div><span>计算结果</span><span v-text="result"></span></div>
</div>

设置 计算功能

<script type="text/javascript">
    /* */
    var vm = new Vue({
      el: "#app",
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
</script>

最终代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单计算器</title>
</head>

<body>
  <div id='app'>
    <h1>简单计算器</h1>
    <div><span>数值A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">计算</button>
    </div>
    <div><span>计算结果</span><span v-text="result"></span></div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /* */
    var vm = new Vue({
      el: "#app",
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue elementUI 上传非空验证示例代码

    vue elementUI 上传非空验证示例代码

    这篇文章主要介绍了vue elementUI 上传非空验证,原理就是写一个假的红色*号,每次点击查看的时候执this.rules.staffImg[0].required = false,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-12-12
  • 详解vue-cli与webpack结合如何处理静态资源

    详解vue-cli与webpack结合如何处理静态资源

    本篇文章主要介绍了详解vue-cli与webpack结合如何处理静态资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • webpack&webpack-cli完全卸载过程

    webpack&webpack-cli完全卸载过程

    本文介绍了如何删除全局和本地的webpack及其CLI,并提供了检查webpack残余文件的方法,总结了个人的操作经验,旨在为读者提供参考,并期待获得更多支持
    2024-09-09
  • Vue3基础安装以及配置详解

    Vue3基础安装以及配置详解

    这篇文章主要介绍了Vue3基础安装以及配置详解,需要的朋友可以参考下
    2023-01-01
  • vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    vue使用iview的modal弹窗嵌套modal出现格式错误的解决

    这篇文章主要介绍了vue使用iview的modal弹窗嵌套modal出现格式错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue利用路由钩子token过期后跳转到登录页的实例

    Vue利用路由钩子token过期后跳转到登录页的实例

    下面小编就为大家带来一篇Vue利用路由钩子token过期后跳转到登录页的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue使用vm.$set()解决对象新增属性不能响应的问题

    Vue使用vm.$set()解决对象新增属性不能响应的问题

    这篇文章主要介绍了Vue使用vm.$set()解决对象新增属性不能响应的问题,为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以参考下
    2023-05-05
  • Vue调用PC摄像头实现拍照功能

    Vue调用PC摄像头实现拍照功能

    这篇文章主要为大家详细介绍了Vue调用PC摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 关于vue跳转后页面置顶的问题

    关于vue跳转后页面置顶的问题

    这篇文章主要介绍了关于vue跳转后页面置顶的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • 详解Vue源码之数据的代理访问

    详解Vue源码之数据的代理访问

    这篇文章主要介绍了详解Vue源码之数据的代理访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论