Vue.js03：v-model实现简易计算器
v-model用于数据的双向绑定。bug不少，凑合看吧，主要是练习v-model。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model 双向绑定数据 -->
<input type="text" v-model="n1"> <select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select> <input type="text" v-model="n2"> <!-- @ 用于事件绑定 -->
<input type="button" value="=" @click="cal"> <input type="text" v-model="result">
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
cal(){
switch(this.opt){
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break
}
}
}
})
</script>
</html>
Vue.js03：v-model实现简易计算器的更多相关文章
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue实现简易计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 制作一个简易计算器——基于Android Studio实现
一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...
- 黑马vue---15、使用v-model实现简易计算器
黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...
- 自制c#简易计算器
这是一个课堂作业,我觉得作为一个简易的计算器不需要态度复杂的东西,可能还有一些bug,有空再慢慢加强. using System;using System.Collections.Generic;us ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- PHP学习笔记02——简易计算器
<!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...
- JavaScript之简易计算器
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 菜鸟学习Struts——简易计算器
这是学习Struts的一个简单的例子文件结构如下: 1.配置Struts环境 2.新建input.jsp,success.jsp,error.jsp input.jsp代码如下: <%@ pag ...
随机推荐
- gitbook 入门教程之使用 gitbook-editor 编辑器开发电子书
亲测,目前已不再支持旧版 gitbook-editor 编辑器,而官网也没有相应的新版编辑器,如果哪位找到了新版编辑器,还望告知! 现在注册 gitbook 账号会默认重定向到 新版官网,而 旧版官网 ...
- sqlserver笔记----创建用户赋予权限
1.创建用户: create login username with password='密码' , default_database=数据库; create user username for lo ...
- Linux新手随手笔记1.8
配置网卡服务 将网卡的配置文件,保存成模板,叫做会话. nmcli命令查看网卡信息.nmcli是一款基于命令行的网络配置工具 只有一个网卡信息,下面我们再添加一个. 公司:静态IP地址 家庭:DHCP ...
- JavaScript Date 对象 实现 时间戳=>日期对象 ，时间戳=>字符串，字符串=>时间戳，获取一年内所有的星期
由于业务需求要写一个日历,日历好写,但是,要标出周六和周日为红色,用到的部分核心函数如下: <script> /* *时间戳=>日期对象 * return Number * */ f ...
- Java集合框架详解（全）
一.Java集合框架概述 集合可以看作是一种容器,用来存储对象信息.所有集合类都位于java.util包下,但支持多线程的集合类位于java.util.concurrent包下. 数组与集合的区别如下 ...
- .NET Core TDD 前传: 编写易于测试的代码 -- 依赖项
第1篇: 讲述了如何创造"缝". "缝"(seam)是需要知道的概念. 第2篇, 避免在构建对象时写出不易测试的代码. 本文是第3篇, 讲述依赖项和迪米特法则 ...
- 机器学习中如何处理不平衡数据（imbalanced data）？
推荐一篇英文的博客: 8 Tactics to Combat Imbalanced Classes in Your Machine Learning Dataset 1.不平衡数据集带来的影响 一个不 ...
- 【反编译系列】二、反编译代码（jeb）
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 一般情况下我们都是使用dex2jar + jd-gui的方式反编译代码,在实际使用过程中,有时候发现反编译出来的代码阅读效果不是很好 ...
- 学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 强化学习（八）价值函数的近似表示与Deep Q-Learning
在强化学习系列的前七篇里,我们主要讨论的都是规模比较小的强化学习问题求解算法.今天开始我们步入深度强化学习.这一篇关注于价值函数的近似表示和Deep Q-Learning算法. Deep Q-Lear ...