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磁盘相关命令
一.查看文件夹大小du du -h -d1 2>/dev/null 解释: h表示以可读性较好的方式显示,即带单位显示 d表示深度depth,为1表示只显示当前目录下文件的大小 2>/de ...
- 大道至简的C语言内存管理
C语言内存的开辟和释放需要程序员自己来实现. 而C语言的内存开辟和释放只在stdlib.h里面提供了四个函数,这么简洁的设计就足以完成一切工作. C++里面各种类型的指针漫天飞舞,显得啰嗦冗余. ca ...
- [转]MySQL DBA面试全揭秘
本文起源于有同学留言回复说想了解下MySQL DBA面试时可能涉及到的知识要点,那我们今天就来大概谈谈吧. MySQL DBA职位最近几年特别热门,不少朋友让我帮忙推荐什么的,也有很多公司找不到合 ...
- Windows Hadoop Error: JAVA_HOME is incorrectly set.
出现这个问题,首先java -version java version "1.8.0_91"Java(TM) SE Runtime Environment (build 1.8.0 ...
- 【struts2】自定义登录检查拦截器
在实际开发中,一个常见的功能要求是:有很多操作都需要登录后才能操作,如果操作的时候还没有登录,那么通常情况下会要求跳转回到登录页面. 1)如何实现这样的功能呢? 在具体实现之前,先来考虑几个问题: ( ...
- mac mini 制作fusion drive 的方法
下载yosemite,格式化磁盘,运行如下命令,制作os x 启动盘 sudo /Applications/Install\ OS\ X\ Yosemite.app/Contents/Resour ...
- Python字符串与二进制串的相互转换
python基础知识之字符编码与转换 - 机壳啦 - 博客园https://www.cnblogs.com/home979/p/7838244.html Python 字符串与二进制串的相互转换 - ...
- [转]springSecurity源码分析—DelegatingFilterProxy类的作用
使用过springSecurity的朋友都知道,首先需要在web.xml进行以下配置, <filter> <filter-name>springSecurityFilterC ...
- jeecg中datagrid中获取选定行的字段值
datagrid代码如下: <t:datagrid name="orderMainList" checkbox="true" pagination=&qu ...
- JavaScript 循环：如何处理 async/await
如何串行或者并行运行异步循环? 在使用循环处理异步的魔法之前,我们先来看下我们是怎么处理同步循环的. 同步循环 很久以前我写的循环是这样的: for (var i = 0; i < array. ...