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

vue.js的简单自动求和计算实例

 更新时间：2019年11月08日 09:25:13   作者：做个温暖的太阳  
今天小编就为大家分享一篇vue.js的简单自动求和计算实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

一、导入vue.js

可以用cdn，也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js.

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

二、前端页面

我用了一个表格，话不多说直接上代码

<div id="vuetest">
 <table>
 <tr>
 <td>数学</td>
 <td><input type="text" v-model.number="math"></td>
 </tr>
 <tr>
 <td>物理</td>
 <td><input type="text" v-model.number="physics"></td>
 </tr>
 <tr>
 <td>英语</td>
 <td><input type="text" v-model.number="english"></td>
 <tr>
 <td>总分</td>
 <td>{{sum}}</td>
 </tr>
 <tr>
 <td>平均分</td>
 <td>{{average}}</td>
 </tr>
 </tr>
 </table>
 </div>

二、 js代码

1.创建一个 vue容器 在el中写你的容器id。

2.在data中写你的数据值，注意与html页面中的v-model.number=中写的相对应。

（v-model是负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理）

math：后面也可以写固定的值像math:“90”,以此类推

3.绑定你的表达式，用computed监控前面定义的变量并写一个方法。

注意:{{}}里面要与js里面对应

我简单写了个求和与平均值的方法

4.在文本框里输入数字就可以自动进行动态的求和，平均值计算了，是不是很方便。

js代码如下

var vuetest = new Vue({
 el:'#vuetest',
 data:{
 math:'',
 physics:'',
 english:'',
 },
 computed :{
 sum:function () {
 return parseFloat(this.math)+this.physics+this.english; 
  },
 average :function(){
 return Math.round(this.sum/3);
  } 
 }
 });

效果

以上这篇vue.js的简单自动求和计算实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue 点击删除常用方式小结

    vue 点击删除常用方式小结

    这篇文章主要介绍了vue 点击删除常用方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

    这篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue实现excel文件的导入和读取完整步骤

    vue实现excel文件的导入和读取完整步骤

    Vue的数据绑定功能非常强大,很适合用来读取Excel内容,这篇文章主要给大家介绍了关于vue实现excel文件的导入和读取的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • 详解element-ui中el-select的默认选择项问题

    详解element-ui中el-select的默认选择项问题

    这篇文章主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue-admin-template解决登录和跨域问题解决

    vue-admin-template解决登录和跨域问题解决

    本文主要介绍了vue-admin-template解决登录和跨域问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue2中实现双击事件的几种常见方法

    Vue2中实现双击事件的几种常见方法

    这篇文章主要介绍了Vue2中实现双击事件的几种常见方法,Vue2中处理双击事件的方法包括使用@dblclick指令、addEventListener方法和第三方库,这些方法提供了灵活的解决方案,以满足不同的需求,需要的朋友可以参考下
    2024-11-11
  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    vue用Object.defineProperty手写一个简单的双向绑定的示例

    这篇文章主要介绍了用Object.defineProperty手写一个简单的双向绑定的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题

    这篇文章主要介绍了Vue2.x如何解决Element组件el-tooltip滚动时错位不消失的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • Vue 动态组件components和v-once指令的实现

    Vue 动态组件components和v-once指令的实现

    这篇文章主要介绍了Vue 动态组件components和v-once指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue组件通信的四种方式汇总

    Vue组件通信的四种方式汇总

    这篇文章主要给大家介绍了关于Vue组件通信的四种方式，分别是父子组件通信、非父子组件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
    2018-02-02

最新评论