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 ...
随机推荐
- 安卓开发笔记（二十五）：ViewPager的使用
首先我们来看看运行之后的效果: 然后我们也不多说废话了,下面是这个项目所需要的全部代码,很多博主写这个都不把代码写完,因此笔者自己也琢磨了一会儿才把这个弄出来,感觉很烦,但我肯定会把代码写全的.我这里 ...
- Flutter的初体验--初次配置的问题
首先参照官方文档进行搭建Mac下的环境 ,然后就会遇到以下问题: 1.在下载了Flutter 之后,执行Flutter doctor之后,报错: Could not resolve URL &qu ...
- windows 结束端口占用
1. cmd 调出命令行窗口 2. netstat -ano 查看端口被占用情况 3.命令:tasklist | findstr "9480" 发现被httpd.exe 占用 ...
- eclipse代码提示设置过常用字符还是不起作用的解决方法
问题:重装eclipse之后发现没有了代码提示,一般情况下在设置中添加自动提示的字符之后就可以了,设置如下 如上图,初始的时候是只有一个点号,并没有字符,输入26个字母的大小写后点击Apply and ...
- V8引擎的垃圾回收策略
V8 的垃圾回收策略主要基于分代式垃圾回收机制.所谓分代式,就是将内存空间分为新生代和老生代两种,然后采用不同的回收算法进行回收. 新生代空间 新生代空间中的对象为存活时间较短的对象,大多数的对象被分 ...
- Python中星号的本质和使用方式
翻译:Python 开发者 - 一汀, 英文:Trey Hunner http://blog.jobbole.com/114655/ Python开发者 在 Python 中有很多地方可以看到*和** ...
- MySQL命令窗口下中文显示乱码的解决过程
在dos客户端输出窗口中查询表中的数据,还有项目部署到服务器上时前台的页面,中文数据都显示成乱码,如下图所示: 这个问题困扰了我一天,后来解决了才发现原来我的方向错了,一直我以为是SpringBoot ...
- .NET Core TDD 前传: 编写易于测试的代码 -- 全局状态
第1篇: 讲述了如何创造"缝". "缝"(seam)是需要知道的概念. 第2篇, 避免在构建对象时写出不易测试的代码. 第3篇, 依赖项和迪米特法则. 本文是 ...
- 中国.NET：各地微软技术俱乐部汇总（更新中...）
与微软技术的发展历程相似,微软俱乐部的发展同样经历着沉沉浮浮.2002年周庆麒先生创办的著名Office技术论坛Excel Home的上线,各种线上技术社区在中国的互联网世界中萌发.接着以鞠海洋(广州 ...
- 『集群』004 Slithice 集群分布式(多个客户端，基于中央服务器的集群服务)
Slithice 集群分布式(多个客户端,基于中央服务器的多个集群服务端) 案例Demo展示: 集群架构图 如下: 如上图,上图 展示了 这个集群 的 结构: >一个中央服务器(可以有多个),负 ...