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


Posted in Javascript onNovember 08, 2019

一、导入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>

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

二、 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.js的简单自动求和计算实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
JavaScript DOM基础
Apr 13 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue中get请求如何传递数组参数的方法示例
Nov 08 #Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
vue视频播放暂停代码
Nov 08 #Javascript
vue-dplayer 视频播放器实例代码
Nov 08 #Javascript
BootstrapValidator实现表单验证功能
Nov 08 #Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 #Javascript
Vue修改项目启动端口号方法
Nov 07 #Javascript
You might like
ThinkPHP表单自动验证实例
2014/10/13 PHP
Angularjs基础知识及示例汇总
2015/01/22 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python操作SQLite简明教程
2014/07/10 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python跳出多重循环的方法示例
2019/07/03 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python多进程重复加载的解决方式
2019/12/13 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
大堂副理的岗位职责范文
2014/02/17 职场文书
财产公证书样本
2014/04/04 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
服务员岗位职责范本
2015/04/09 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
早上好问候语大全
2015/11/10 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers