Vue之vuex实现简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex——示例计算器</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js" type="text/javascript"></script>
<script src="https://unpkg.com/vue-router@2.5.3/dist/vue-router.js" type="text/javascript"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js" type="text/javascript"></script>
</head>
<body> <style>
.result{
background: #ccc;
height:200px;
width: 80%;
text-align: right;
font-size: 48px;
position: relative;
}
.enter{
background: #ccc;
height: 50px;
width: 78%;
text-align: right;
font-size:32px;
border-bottom: 1px solid white;
padding-right: 2%;
}
.keys{
background: #eee;
width: 80%;
}
.item{
width: 25%;
height: 80px;
display: inline-block;
line-height: 80px;
border-bottom: 1px solid white;
text-align: center;
cursor: pointer;
}
.item:hover{
background: #000;
color: #ccc;
}
.item:first-child{
color: red;
}
.item:first-child:hover{
background: red;
color: #ccc;
}
.item:last-child{
background: red;
color: white;
}
.item:last-child:hover{
background: green;
color: red;
}
</style> <div id="app">
<div class="result">
<!--绑定计算属性result-->
<div style="position: absolute;bottom: 0;right: 2%;">
{{ result }}
</div>
</div>
<div class="enter">
<!--绑定计算属性enter-->
{{ enter === ""?0:enter }}
</div>
<div class="keys">
<div class="list">
<!--键盘区域-->
<keyboard v-for="item in keys" :value="item"></keyboard>
</div>
</div>
</div> <script>
// 创建仓库store
const store = new Vuex.Store({
state: {
result: "", //运算结果
enter: "" //输入的值
},
mutations: {
calculate(state,value){
if(value === "=") {
//按键的值为=， 进行结果计算
state.result = eval(state.enter);
state.enter += value;
} else if (value === "clear"){
//按键的值为clear，清空数据
state.result = state.enter = "";
} else {
//输入结果enter进行拼接
state.enter += value;
}
}
}
});
//自定义组件
Vue.component('keyboard',{
//接受的参数value，代表键盘的值
props: ['value'],
//模板
template: `<div class="item"
@click="getKeyboardValue"
:data-value="value">
{{value}}
</div>`,
methods: {
// 点击事件处理函数
getKeyboardValue(event){
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交mutation
this.$store.commit('calculate', value);
}
}
}); //创建Vue实例
const app = new Vue({
//挂载元素
el: "#app",
//ES6语法，相当于"store":store
store,
data: {
keys: [
'clear','+','-','*',
'7','8','9','/',
'4','5','6','0',
'1','2','3','=',
]
},
computed: {
result(){
//通过this.$store获取仓库的数据result
return this.$store.state.result;
},
enter(){
//通过this.$store获取仓库的数据result
return this.$store.state.enter;
}
}
});
</script> </body>
</html>
代码抄自：https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654627&idx=1&sn=85bb9d0dfe34ab464f984f5f3042be2e&chksm=872c42dcb05bcbca37d495b24dfccb4a0179101e557be4c0119ab5a218c406a736e595ba5131&scene=21#wechat_redirect
微信号：webjiaocheng/Web前端教程
谢谢
Vue之vuex实现简易计算器的更多相关文章
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue实现简易计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 黑马vue---15、使用v-model实现简易计算器
黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- 自制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 ...
随机推荐
- centos中执行apt-get命令提示apt-get command not found
先说结论: 在centos下用yum install xxx yum和apt-get的区别: 一般来说著名的linux系统基本上分两大类: RedHat系列:Redhat.Centos.Fedora ...
- 进阶之路（基础篇） - 020 放弃Arduino IDE，拥抱Sublime Text 3
本帖转载:Arduino讨论区相信大家对Arduino IDE的不能输入中文,排版不方便,没有行号,界面难看......深恶痛绝.我也是.经过vs2012,eclipse等IDE的试用,配置麻烦,ID ...
- 进阶之路（中级篇） - 016 温湿度传感器DHT11
如果想使用 Arduino 开发板驱动 DHT11 来获取温湿度的时候建议使用第三方的库,这样可以加快程序的开发速度,而且不容易出错,下面的代码我已经安转了第三方的库了.详细的安装方法请参考极客先锋的 ...
- is-a，has-a，like-a是什么 sql server中，N''表示什么意思？ 关于SQL SERVER的N前缀的理解
https://blog.csdn.net/ooppookid/article/details/51174122#commentBox 1.is-a,has-a,like-a是什么 在面向对象设计的领 ...
- Android 自定义漂亮的圆形进度条
公司有这样一个需求,实现这个圆弧进度条 所以,现在就将它抽取出来分享 如果需要是圆帽的就将,下面这句代码放开即可 mRingPaint.setStrokeCap(Paint.Cap.ROUND);// ...
- 【转】AlphaGo与人工智能
AlphaGo与人工智能 在之前的一篇文章中我指出,自动驾驶所需要的“视觉识别能力”和“常识判断能力”,对于机器来说是非常困难的问题.至今没有任何机器可以在视觉方面达到驴的水平,更不要说和人比.可是最 ...
- ASP.NET 的ClientIDMode属性
在ASP.NET 4.0之前我们总是要为控件的ClientID头疼,比如明明一个叫lblName的Label放在一个叫做grd的GridView里面后,在页面上改Label的ID就变成了诸如grd_c ...
- 设计模式C++实现——模板方法模式
模式定义: 模板方法模式在一个方法中定义了一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类能够在不改变算法结构的情况下,又一次定义算法中的某些步骤. 模板就是一个方法.更详细的说.这种方法将 ...
- 【转载】使用 Google Guava 美化你的 Java 代码
转载地址: https://blog.csdn.net/wisgood/article/details/13297535 原文地址:https://my.oschina.net/leejun2005/ ...
- uiautomatorviewer 查看元素新思路
用adb 命令把图片和uix获取出来,再导入uiautomatorviewer adb shell uiautomator dump /data/local/tmp/uidump.uixadb pul ...