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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
浅谈PHP封装CURL
2019/03/06 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
对联广告js flash激活
2006/10/19 Javascript
动态加载js的几种方法
2006/10/23 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Python定时执行之Timer用法示例
2015/05/27 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
使用python turtle画高达
2020/01/19 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
努力学习演讲稿
2014/05/10 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
人事任命通知书
2015/04/21 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript