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

 更新时间:2019-11-08 09:48:56   作者:佚名   我要评论(0)

一、导入vue.js
可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js.
<script src="http://files.jb51.net/file_images/article/201911/2019110809

一、导入vue.js

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

<script src="http://files.jb51.net/file_images/article/201911/20191108092417.jpg" />

二、 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 表格table列求和的问题
  • vue点击自增和求和的实例代码

相关文章

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

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

    一、导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="http://files.jb51.net/file_images/article/201911/2019110809
    2019-11-08
  • flask框架自定义过滤器示例【markdown文件读取和展示功能】

    flask框架自定义过滤器示例【markdown文件读取和展示功能】

    本文实例讲述了flask框架自定义过滤器。分享给大家供大家参考,具体如下: 除了一些内置的join length safe等过滤器外, flask还提供了自定义过滤器的功能. 一. 自定
    2019-11-08
  • SpringBoot yml配置文件调用过程解析

    SpringBoot yml配置文件调用过程解析

    这篇文章主要介绍了SpringBoot yml配置文件调用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1、y
    2019-11-08
  • shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    需求 批量实现自动发送公钥到远程主机 环境 firewalld:关闭 selinux:关闭 实现方式 sshpass命令 shell调用expect命令 sshpass命令 #
    2019-11-08
  • Django框架下静态模板的继承操作示例

    Django框架下静态模板的继承操作示例

    本文实例讲述了Django框架下静态模板的继承操作。分享给大家供大家参考,具体如下: 前言:第一篇博客,毕业校招在即,抽空把做过的项目都整理一下。 开发环境:pyt
    2019-11-08
  • vue视频播放暂停代码

    vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video
    2019-11-08
  • 详解使用Spring快速创建web应用的两种方式

    详解使用Spring快速创建web应用的两种方式

    介绍 本篇文章主要介绍,如何使用 Spring 开发一个 Web 应用。 我们将研究用 Spring Boot 开发一个 web 应用,并研究用非 Spring Boot 的方法。 我们将主要
    2019-11-08
  • 使用go在mangodb中进行CRUD操作

    使用go在mangodb中进行CRUD操作

    我在学习go语言之前,在对数据库进行CRUD的操作基本是用java和sql来对mysql数据库进行操作,但是到了实习中公司业务都是用的是mangodb,通过一段学习时间后,
    2019-10-08
  • Win10 系统下快速搭建mxnet框架cpu版本

    Win10 系统下快速搭建mxnet框架cpu版本

    Win10 系统下快速搭建mxnet框架cpu版本 一:安装Anaconda 1. 从官方网站下载 https://www.anaconda.com/download/ 建议下载python 3.7版本的Anaconda 2.
    2019-10-08
  • vue封装swiper代码实例解析

    vue封装swiper代码实例解析

    这篇文章主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 data(
    2019-10-08

最新评论