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.js的简单自动求和计算实例
一.导入vue.js 二.前端页面我用了一个表格,话不多说直接上代码数学物理英语总分 {{sum}} 平均分 {{average}} 二. js代码 1.创建一个 vue容器在el中写你的 ...
仿vue.js实现简单模板引擎（2kB）
仿vue.js实现简单模板引擎(2kB) 点击预览 index.html <!DOCTYPE html> <html lang="zh-CN"> <h ...
vue.js更改颜色_如何使用Vue.js实现简单的标题更改应用程序
vue.js更改颜色 by Anoob Bava 通过Anoob Bava 如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title chang ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
【JS】Vue.js实现简单的ToDoList（一）——前期准备
一.前言最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是V ...
vue实现搜索框搜索新增_基于Vue.js实现简单搜索框
主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo ...
利用Vue.js实现简单员工管理系统（增删查）的功能
员工管理系统注意!!此篇博客没有涉及后台数据库,所有数据自己设定,不经过数据库来增删改查!! 我们想要实现一个简单的员工管理系统案例需要以下几个步骤,我们一起来康康叭~~ 第一步:首先先实现基础的表 ...
Vue.js实现简单的按钮点击改变css样式
本人是前端的初学者,也在自学Vue.js,在自己编写系统的过程遇到的小问题,在这里分享给大家,若有什么不对的地方还请各位指正喔(づ￣ 3￣)づ一.效果二.前端代码这是静态页面代码部分(就两个简单 ...
使用Vue.js搭建简单的表格页面
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>我 ...

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

一、导入vue.js

二、前端页面

二、 js代码

vue.js的简单自动求和计算相关推荐

最新文章

热门文章