vue实现计算机功能

上班无聊写个计算机玩玩

很智能的！！

<template>
<div><div><p>计算机</p><span>您算什么呢</span><ul v-if="show"><li v-for="(item,index) in Computers" :key="index" @click="Algorithm(index)">{{item.name}}</li></ul><div class="box" v-else><input type="text" name="" id="" v-model="num">&nbsp;<span>{{symbol}}</span>&nbsp; <input type="text" name="" id="" v-model="num2"> = {{current}}</div><button @click="back" v-if="show==false">返回</button></div>
</div></template><script>
export default {name: 'Home',data (){return {count:0,num:'',num2:'',index:"",show:true,Computers:[{name:'+'},{name:'-'},{name:'×'},{name:'/'}]}},methods:{Algorithm(index){this.index=indexthis.show=false},back(){this.num=''this.num2=''this.show=true}},computed:{symbol(){if(this.index==0){return '+'} else if(this.index==1){return '-'}else if(this.index==2){return '×'}else if(this.index==3){return '/'}},current(){if(this.index==0){var number=Number(this.num) + Number(this.num2)return number} else if(this.index==1){var number=Number(this.num) - Number(this.num2)return number}else if(this.index==2){var number= Number(this.num) * Number(this.num2)return number}else if(this.index==3){var number= Number(this.num) / Number(this.num2)return number}else{return 0}}}}
</script>
<style lang="less" scoped>li{list-style: none;width: 200px;height: 50px;margin: 0 auto;cursor:pointer;font-size: 29px;}ul{margin-top: 30px;}input{width: 50px;height: 30px;}button{margin-top: 40px;background: rgb(75, 214, 103);border: 0;width: 100px;color: white;height: 30px;border-radius: 5px;}.box{margin-top: 30px;}
</style>

vue实现计算机功能相关推荐

用计算机实现智能解题,浙江省信息技术学考复习模块2——计算机功能、智能处理、字处理...
信息技术复习模块2 (计算机功能.智能处理.字处理) 一.知识梳理 (一)计算机的基本功能与特征: (1)计算机的基本功能:计算机只是一堆由集成电路构成的高速电子开关,只会按照程序的规定执行指令.计算 ...
利用SCCM2012中的导入计算机功能来实现定制化的操作系统部署
前言在我们通过MDT工具或SCCM系统给客户机部属操作系统时, 常遇到各种各样的需求.有些需求很容易实现, 如自动加域,格式化硬盘,预置管理员密码等.有些功能可能就稍微麻烦一些. 比如,在部署操作系 ...
vue实现打印功能的两种方法/web打印控件
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 1 2 import Print fro ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
VUE路由防卫功能举例
VUE路由防卫功能举例路由防卫的功能在前端应用比较广泛,主要用于前端页面与页面之间的跳转限制,也可以称之为权限控制,我们接下来使用登录页面与主页面使用路由防卫功能. 路由防卫分为全局防卫.路 ...
计算机组成原理第三章笔记---计算机功能与互联
本文内容整理自西安交通大学软件学院李晨老师的课件,仅供学习使用,请勿转载计算机组成原理系列笔记汇总:计算机组成原理笔记及思维导图汇总附复习建议_Qlz的博客-CSDN博客文章目录文章目录文章目 ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
vue实现通讯录功能
vue实现通讯录功能
学校计算机功能室布置,新乡学校计算机功能室建设,景观雕塑设计
新乡学校计算机功能室建设,景观雕塑设计,排水排水温度.排水中有酸,浓度及数量.排水中有碱,浓度及数量.排水中有放射性物质,有多少种放射性物质,浓度多少.设置地漏,地漏是实验室的地面上设置的一个排水口, ...

vue实现计算机功能

vue实现计算机功能相关推荐

最新文章

热门文章