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 ...
随机推荐
- 理解metrics.classification_report
混淆矩阵是一个矩阵,类别个数可以有多个,a[i][j]表示将类别i的样本误判为类别j的个数. classification_report用来分析不同类别的准确率,召回率,F1值等,从而便于按照类别查看 ...
- git学习笔记（四）—— 分支管理
一.创建与合并分支 git branch //查看分支 git branch <name> //创建分支 git checkout <name> //切换分支 git chec ...
- HDU 4324 Triangle LOVE （拓扑排序）
Triangle LOVE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
- 使用java修改图片DPI
修改以后可以直接用PS打开看效果 全部使用rt下的类,无需下载其他jar包 import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.imag ...
- 《JAVA与模式》之原型模式(转载)
原型模式其实就是java的拷贝机制 原文出处:http://blog.csdn.net/zhengzhb/article/details/7393528 定义:用原型实例指定创建对象的种类,并通过 ...
- Segment Advisor
Segment Advisor通过分析和检查AWR中关于segments的使用和增长统计信息,以及采样分析segment中的数据,找出哪些segments有可以回收的空间. Segment Advis ...
- python开发者框架套件总结: package 包 frameworks
python开发者的package 包 框架套件总结: frameworks 开发环境: anaconda pycharm django awesome-django : 介绍 django ...
- CListCtrl的Report风格自绘
原文链接: http://jingyan.baidu.com/article/5bbb5a1b38af1113eaa17910.html CListCtrl是MFC中运用最广泛的控件之一,很多软件都有 ...
- django form 对象is_bound属性
问题: 如果判断一个form实例中有没有数据? bug方法: 通过form实例的is_valid()方法来验证 1.Form类的定义 class YourName(Form): your_name = ...
- es6Promise及小程序Promise用法
本文主要说一下Promise,Prepending(进行时),Resolve(成功了),Reject(失败了),then在小程序中的实际应用 关于promise的介绍什么的就不说了网上一搜一大堆,这里 ...