知识点：

v-model双向绑定

v-on事件绑定

实现效果

源码

<!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="./lib/vue-2.4.0.js"></script></head><body><div id="app"><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="calc" /><input type="text" v-model="result" /></div><script>var vm = new Vue({el: '#app',data: {n1: 0,n2: 0,opt: '+',result: 0},methods: {calc() {switch (this.opt) {case '+':this.result = parseInt(this.n1) + parseInt(this.n2)breakcase '-':this.result = parseInt(this.n1) - parseInt(this.n2)breakcase '*':this.result = parseInt(this.n1) * parseInt(this.n2)breakcase '/':this.result = parseInt(this.n1) / parseInt(this.n2)breakdefault:this.result = 0}}}})</script></body>
</html>

Vue实现简单计算器功能相关推荐

python实现简单计算器功能键介绍_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...
python实现简单计算器_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...
2019.8.设计菜单，完成简单计算器功能。要求：设计5个菜单项，功能分别为加减乘除。
1.题目: 设计菜单,完成简单计算器功能.要求:设计5个菜单项,功能分别为加减乘除. 2.代码展示(复制可直接运行) import java.util.Scanner;public class Y20 ...
html制作计算器val,JavaScript实现的超简单计算器功能示例
本文实例讲述了JavaScript实现的超简单计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码: www.ddpool.cn JS计算器 // window.onload 获 ...
python简单计算器综合实验报告_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...
用计算机怎么计算sh 3,Shell 实现简单计算器功能
Shell 实现简单计算器功能,脚本如下: [root@nfs scripts]# cat jisuan.sh #!/bin/bash print_usage(){ printf $"USA ...
c语言程序实现简单计算器功能,C语言实现简单计算器小项目
昨天刚安装上devc++,半夜想着练练C语言吧于是就看到实验楼有一个计算器的项目之前做过一次,这次写的主要是思路首先我们先从原理思考jia,实现简单的计算器就要具备加减乘除这些,看普通的计算器也 ...
vue实现简单搜索功能
目录 1.概述 2.功能逻辑 2.1功能流程 2.2 流程图 3.功能实现 3.1 vue组件化 3.2 代码 3.3 动态效果 1.概述在vue项目中,搜索功能是我们经常需要使用的一个场景,最常用 ...
MCU-51：51单片机实现简单计算器功能
目录一.要实现什么功能二.怎样实现三.代码演示注意:一定要看今天不打算学新知识了,把前段时间学的复习下. 用单片机按键实现计算器简单功能,开干! 一.要实现什么功能多位显示,小数计算,连续 ...

Vue实现简单计算器功能

知识点：

实现效果

源码

Vue实现简单计算器功能相关推荐

最新文章

热门文章