Vue四则运算计算器

分手后的思念是犯贱 2023-05-29 02:26 14阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	<body>
    		<div class="demo">
    			<p>
    				数值A是<input type="number" v-model.number="numA" />
    			</p>
    			<p>
    				数值A是<input type="number" v-model.number="numB" />
    			</p>
    			<div>
    				<p>计算结果</p>
    				<p>和:<span>{
       {result.add}}</span></p>
    				<p>差:<span>{
       {result.sub}}</span></p>
    				<p>积:<span>{
       {result.mul}}</span></p>
    				<p>商:<span>{
       {result.div}}</span></p>
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: ".demo",
    			data: {
    				numA: 0,
    				numB: 0
    			},
    			computed: {
    				result: function() {
    					var add = this.numA + this.numB;
    					var sub = this.numA - this.numB;
    					var mul = this.numA * this.numB;
    					var div = this.numA / this.numB
    					return {
    						add: add,
    						sub: sub,
    						mul: mul,
    						div: div
    					}
    				}
    			}
    		})
    	</script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关四则运算简易计算器C语言详解

问题描述：输入一个不含括号的四则运算表达式，输出计算结果。方法：四则运算只有两种优先级，在输入两步计算（三个操作符）之后一定能得到一个结果。如1-2\3，无论3后的操作符是

墨蓝/ 2023年06月13日 11:11/ 0 赞/ 4 阅读

相关 Vue四则运算计算器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

分手后的思念是犯贱/ 2023年05月29日 02:26/ 0 赞/ 15 阅读

相关 vue 简易计算器

vue 刚入门实现简易计算器如果是刚学习vue，不懂得地方可以问我哦，互相交流能更好的帮助学习。话不多说，亮代码最重要。。。 <!DOCTYPE htm

ゞ浴缸里的玫瑰/ 2022年12月01日 15:53/ 0 赞/ 247 阅读

相关 Vue实现简易计算器

文章目录简易计算器案例 1. HTML 代码结构 2. Vue实例代码： 3. 全部代码简易计算器案例 ![在这

刺骨的言语ヽ痛彻心扉/ 2022年10月23日 08:16/ 0 赞/ 268 阅读

相关四则运算计算器c语言switch,设计一个五个数进行四则运算的计算器 c语言

2016-02-24 回答 dlib.h int fun1(int \i,int \j) \{int a,b,c,d,e=0; a=random(100); b=ra

小灰灰/ 2022年10月15日 00:39/ 0 赞/ 227 阅读

相关栈实现四则运算的计算器

　　这几天一直在做停车场和计算器项目，在停车场做完后，再去做计算器，突然发现简单了很多，对大体的一个思路有了很清楚的了解，与停车场相比，计算器只用了一个结构变量，只有一个操作数

蔚落/ 2022年07月13日 00:25/ 0 赞/ 244 阅读

相关 vue简易计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

小灰灰/ 2022年04月18日 06:33/ 0 赞/ 376 阅读

相关 python笔记:tkinter图形库开发一个简易四则运算计算器

from tkinter import import tkinter.font from functools import partial d

我就是我/ 2022年01月21日 00:57/ 0 赞/ 335 阅读

相关 vue实现四则运算封装组件

<template> <div> <el-row class="tableRowAlign"> <el-col :span="24"

你的名字/ 2021年09月27日 22:54/ 0 赞/ 667 阅读

相关 vue简易计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

蔚落/ 2021年07月24日 13:23/ 0 赞/ 506 阅读