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 ...
随机推荐
- 解决ruby安装后无法添加淘宝gem源------------学习记录
使用sass ,需要安装ruby,会建议移除gem源,添加淘宝的gem源,但是淘宝的镜像源已经停止维护啦!!用https://gems.ruby-china.com 代替即可. 操作如下: 1)删除原 ...
- 基于OpenStreetMap计算驾车距离（Java）
最近公司有个项目需要计算6000个点之间的驾车距离,第一时间想到的是利用Google的Distance Matrix API,但是免费Key每天只能计算2500个元素(元素 = 起点数量 * 终点数量 ...
- Git原理与命令大全
Git (wiki: en chs )是一个免费开源的分布式版本控制系统,由linux内核作者linus Torvalds开发,大型开源项目linux kernel.Android.chromium ...
- ioremap_nocache() 函数的使用【转】
本篇文章主要是在ioremap_nocache函数说明的基础上进行整理,加入该函数的用法简介. 函数原型 void __iomem * ioremap_nocache (unsigned long o ...
- 关于uni-app框架的学习-1
根据官方文档进行学习Uni-APP, 再次过程中,记录一些需要熟悉的内容,有不合适的地方,见着都可知道,----我是一个小白,小白,小白 官网地址:https://uniapp.dcloud.io/ ...
- Project file is incomplete. Expected imports are missing 错误解决方案
当你打开一个.net core的项目,Visual Studio 可能无法打开,提示如下错误: D:\workshop\Github\Ocelot\src\Ocelot\Ocelot.csproj : ...
- 在离线环境中安装Visual Stuido 2017
在离线环境中安装Visual Stuido 2017 0x00 写在前面的废话 因为工作上大多数都是在离线环境中进行的,进出离线环境很麻烦,所以之前很长一段时间都在使用VS2010.后来尝试换了VS2 ...
- Python写爬虫爬妹子
最近学完Python,写了几个爬虫练练手,网上的教程有很多,但是有的已经不能爬了,主要是网站经常改,可是爬虫还是有通用的思路的,即下载数据.解析数据.保存数据.下面一一来讲. 1.下载数据 首先打 ...
- SpringBoot整合Spring Security使用Demo
https://start.spring.io/ 生成SpringBoot项目 pom文件应该是我这样的: <?xml version="1.0" encoding=&quo ...
- Java成神之路技术整理（长期更新）
以下是Java技术栈微信公众号发布的关于 Java 的技术干货,从以下几个方面汇总. Java 基础篇 Java 集合篇 Java 多线程篇 Java JVM篇 Java 进阶篇 Java 新特性篇 ...