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 ...
随机推荐
- 解决Dynamics 365使用JS调用Web API时报no property value was found in the payload 错误。
摘要: 微软动态CRM专家罗勇 ,回复323或者20190421可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 碰到如下报错: message: "An er ...
- Odoo11入门请假单模块学习教程源码
欢迎转载,但必须明显标注转载地址. 系统:Windows10 版本:Odoo11 一.创建模块 1.创建一个模块的骨架结构目录(在windows 的 CMD中) E:\Odoo 11.0> py ...
- SQLServer多表联查，多表分页查询
多表联查: select p.*,s.Sheng , i.Shifrom [dbo].[ProductRecordInfo] --表名 p left join [ShengInfo] s on ...
- Ambari REST API 使用介绍 - How To: Use Swagger with Ambari (Explore Ambari REST)
How To: Use Swagger with Ambari (Explore Ambari REST) Article Note : This feature is available from ...
- Maven项目pom文件设置JDK版本
maven项目创建之后有时候默认设定了java的低版本,每次导入项目或者更新maven的时候可能或出现一些报错,在pom.xml设定版本免除这个问题 <build> <finalNa ...
- require.js简单入门
推荐文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, 2)实现并引用 ...
- Java面试题：Java中怎么样实现多线程
方法一:继承 Thread 类,覆盖方法 run(),我们在创建的 Thread 类的子类中重写 run() ,加入线程所要执行的代码即可. 下面是一个例子: public class MyThrea ...
- C# ListView 控件和 INotifyPropertyChanged 接口
ListView 控件和 DataGridView 控件 ListView 是跟 Winform 中 DataGridView 用法以及显示效果差不多的一个 WPF 控件,可以通过列表的方式方便的显示 ...
- Python中路径操作
目录 1. os.path模块 2. pathlib模块 2.1 目录操作 2.2 文件操作 3. shutil模块 3.1 os模块 3.2 shutil模块 1. os.path模块 3.4版本之 ...
- Spring Boot 中的静态资源到底要放在哪里？
当我们使用 SpringMVC 框架时,静态资源会被拦截,需要添加额外配置,之前老有小伙伴在微信上问松哥Spring Boot 中的静态资源加载问题:"松哥,我的HTML页面好像没有样式?& ...