Vue简单的页面计算器

实现一个简单的页面计算器,练习组件的定义和注册方法,以及组件之间的数据传递 

<div id="aa">

    <ul>

        <li>

            <span>第一个数:</span><input v-model.number="first"/>

        </li>

        <li>

            <span>第二个数:</span><input v-model.number="second"/>

        </li>

        <li>

            <button @click="add">+</button>

            <button @click="minus">-</button>

            <button @click="multiply">*</button>

            <button @click="divide">/</button>

        </li>

        <li>

            <span>结果是:{{consequence}}</span>

        </li>

    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

    const jj = new Vue({

        el:'#aa',

        data:{

            first:'',

            second:'',

            consequence:'',

        },

        methods: {

            add(){

                this.consequence=this.first+this.second

            },

            minus(){

                this.consequence=this.first-this.second

            },

            multiply(){

                this.consequence=this.first*this.second

            },

            divide(){

                this.consequence=this.first/this.second

            }    

            }

        ,

    })

</script>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/142440.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓修改ROM 修改固件中的一些基本常识 自己做rom注意事项

修改rom 制作rom 解包rom的一些问题解析 安卓系列机型如何内置app 如何选择so文件内置 修改设置里 添加选项 添加文字 修改图标 修改版本号等等 实例解析 最近有几个粉丝对修改rom有兴趣。今天主要给这些友友提供一些自己初学修改rom的一些建议和思路&#xff0c;可以供大家…

打点初级技巧

什么是打点&#xff1f; 打点的目的获取一个服务器的控制权限。获得一个webshell。 步骤 如果你拿到一个网站的名字&#xff0c;该如何进行打点呢&#xff1f;首先&#xff0c;在天眼查上查询该网站&#xff0c;进入查询到的官网&#xff1a; 天眼查-商业查询平台_企业信息查…

Linux驱动开发笔记

疑问 file_operation中每个操作函数的形参中inode的作用 设备树中compatible属性中厂商和型号如何填写 file_operation定义了Linux内核驱动的所有的操作函数&#xff0c;每个操作函数与一个系统调用对应&#xff0c;对于字符设备来说&#xff0c;常用的函数有&#xff1a;lls…

Java项目实战-查询用户列表接口服务搭建

概述 这里通过设计一个对用户进行增删改查的接口服务&#xff0c;来练习java项目工程化、Spring框架、Mybatis框架的实际应用 本项目目录 上一节初始化项目&#xff0c;已经controller层了&#xff0c;下方新建包&#xff1a;pojo、mapper、service pojo:所有的实体类都放这…

手机相机系统介绍

目录 一张照片是如何生成的? 相机的成像原理 相机硬件 颜色四要素 相机硬件三大块 模组结构 镜头 镜头光路 镜头常见参数 镜头-FOV&EFL 镜头-焦距 镜头-光圈 图像传感器 图像传感器-像素-底 RGB排布 图像传感器-Pattern & PDAF Sensor CMOS sensor …

Kafka的消息传递保证和一致性

前言 通过前面的文章&#xff0c;相信大家对Kafka有了一定的了解了&#xff0c;那接下来问题就来了&#xff0c;Kafka既然作为一个分布式的消息队列系统&#xff0c;那它会不会出现消息丢失或者重复消费的情况呢&#xff1f;今天咱们就来一探。 实现机制 Kafka采用了一系列机…

怎样找到NPM里面开源库下载地址

场景 最近帮忙找一个开源库地址。这里以vue/language-core为例子。 解决 https://registry.npmmirror.com/vue/language-core/1.8.13这里就是如下格式&#xff1a; https://registry.npmmirror.com/{包名}/{版本号}打开这个页面后&#xff0c;得到开源库下载地址&#xff0c…

Java基于SSM+JSP的服装定制系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1 简介2 .技术栈3 分析4系统设计4.1 软件功能模块设计4.2.2 物理模型设计 5系统详细设计5.1系统功…

力扣:110. 平衡二叉树(Python3)

题目&#xff1a; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff…

目前很火的养猫微信小程序源码带流量主+搭建教程

目前很火的养猫微信小程序源码带流量主搭建教程。 搭建教程 进入小程序我们下载开发者工具 开发者工具安装好了 我们就把前端源码导入进开发者工具中 这里的APPID我们填写自己的小程序APPID 修改siteinfo.js里的uniacid和acid 这两个ID在刚才后端添加的小程序那里看 在把…

2023年信创云管平台选哪家?咨询电话多少?

随着云计算和信创国产化的快速发展&#xff0c;越来越多企业需要支持信创系统的云管平台。但很多企业不知道市面上信创云管平台有哪些&#xff0c;也不知道选哪家&#xff1f;这里我们小编就给大家来回答一下。 2023年信创云管平台选哪家&#xff1f;咨询电话多少&#xff1f;…

九日集训 Leetcode 371.两整数之和

给你两个整数 a 和 b &#xff0c;不使用 运算符 和 - &#xff0c;计算并返回两整数之和。 示例 1&#xff1a; 输入&#xff1a;a 1, b 2 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;a 2, b 3 输出&#xff1a;5提示&#xff1a; -1000 < a, b < 10…

智能生活从这里开始:数字孪生驱动的社区

数字孪生技术&#xff0c;这个近年来备受瞩目的名词&#xff0c;正迅速渗透到社区发展领域&#xff0c;改变着我们居住的方式、管理的方式以及与周围环境互动的方式。它不仅仅是一种概念&#xff0c;更是一种变革&#xff0c;下面我们将探讨数字孪生技术如何推动社区智能化发展…

力扣-169. 多数元素(C语言+分治递归)

1. 题目 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 2. 输入输出样例 示例1 输入&#xff1a;nums [3,2,3] 输出&#xff…

代码随想录算法训练营第四十九天 | 动态规划 part 10 | 买卖股票的最佳时机i、ii

目录 121. 买卖股票的最佳时机思路代码 122.买卖股票的最佳时机II思路代码 121. 买卖股票的最佳时机 Leetcode 思路 贪心&#xff1a;记录最低值&#xff0c;并且遍历股票逐个寻找股票卖出最大值 动态规划&#xff1a; dp[i][0] 表示第i天持有股票所得最多现金 dp[i][1] 表示…

黎明加水印微信小程序源码 支持流量主接入

黎明加水印微信小程序源码&#xff0c;支持流量主接入。支持从聊天记录选择文件、相机拍摄、直接选择文件 支持白底、黑底的隐形水印&#xff0c;制作后&#xff0c;通过增加蒙版方能看到水印 纯前端&#xff0c;可嵌入任何项目。 部署教程 1、解压后得到项目文件夹 3、把…

什么才是物联网领域最好的开发语言?

什么才是物联网领域最好的开发语言&#xff1f; 最好&#xff01;运行最快&#xff1f;开发最高效&#xff1f;最容易学习&#xff1f; 各有特点&#xff01; 采用C/C语言&#xff0c;运行最快&#xff0c;一般采用厂家提供的底层驱动支持包BSP&#xff0c;所有MCU都支持。如…

华为OD机考算法题:最小数量线段覆盖

目录 题目部分 解读与分析 代码实现 题目部分 题目最小数量线段覆盖难度难题目说明给定坐标轴&#xff08;一维坐标轴&#xff09;上的一组线段&#xff0c;线段的起点和终点均为整数并且长度不小于1&#xff0c;请你从中找到最少数量的线段&#xff0c;这些线段可以覆盖住…

【从0学习Solidity】36. 默克尔树 Merkle Tree

【从0学习Solidity】36. 默克尔树 Merkle Tree 博主简介&#xff1a;不写代码没饭吃&#xff0c;一名全栈领域的创作者&#xff0c;专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构&#xff0c;分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#xf…

通俗易懂-OpenCV角点检测算法(Harris、Shi-Tomas算法实现)

目录 1 图像的特征 2&#xff0c;Harris角点检测 2.1 代码实现 2.2结果展示 3&#xff0c;Shi-Tomasi角点检测算法 3.1 &#xff0c; 代码实现 3.2结果展示 1 图像的特征 2&#xff0c;Harris角点检测 、 2.1 代码实现 import cv2 as cv import matplotlib.pyplot as …