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 ...
随机推荐
- linux shell 脚本攻略学习17--正则表达式入门
正则表达式(也称为“regex”或“regexp”)是一种用来描述文本模式的特殊语法.在 Linux 系统上,正则表达式通常被用来查找文本的模式,以及对文本流执行“搜索-替换”操作以及其它功能. 正则 ...
- git学习笔记（四）—— 分支管理
一.创建与合并分支 git branch //查看分支 git branch <name> //创建分支 git checkout <name> //切换分支 git chec ...
- TOP字句加SQL变量的相关问题
SQL Server数据库中的变量可以加载TOP字句之后,下文将对TOP字句加SQL变量的相关问题进行讨论,供您参考,希望对您学习SQL数据库有所帮助. SQL Server2005开始,TOP子句后 ...
- idea13注册机
public class Keygen { /** * @param s * @param i * @param bytes * @return */ public static short getC ...
- Eclipse插件的安装与配置
1.下载插件时注意要和Eclipse版本兼容. 2.安装Eclipse插件时注意是否要安装其他的插件,这一点很容易被忽视. 3.有时启动Eclipse未加载插件,解决方法很多,总结一下: a ...
- Linux中断 - 综述
一.前言 一个合格的linux驱动工程师需要对kernel中的中断子系统有深刻的理解,只有这样,在写具体driver的时候才能: 1.正确的使用linux kernel提供的的API,例如最著名的re ...
- 还没被玩坏的robobrowser(6)——follow_link
背景 在做spider的时候,我们经常会有点击链接的需求. 考虑这样的一个简单spider:获取qq.com主页上的今日话题中的内容. 一般思路是先去qq.com首页上找到今日话题的链接,然后点击这个 ...
- Facade 设计模式
目的 在一个子系统的一组接口上提供一个统一的接口.Facade 设计模式定义了一个更高级别的接口,使子系统更容易使用. 通过一个更加简洁的接口来包装一个复杂的子系统. 解决的问题 客户端需要一个简化的 ...
- TCP握手和传输的一次观察
1. TCP三次握手SYN ---> <--- SYN,ACKACK ---> 花费时间:386.718-385.784=0.934ms 2.正常的消息交互2.1. 服务器主动校验 ...
- SQL Server 索引重建脚本
在数据的使用过程中,由于索引page碎片过多,带来一些不利的性能问题,我们有时候需要对数据库中的索引进行重组或者重建工作.通常这个阈值为30%,大于30%我们建议进行索引重建,小于则进行重组操作.以下 ...