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 ...
随机推荐
- public-private-protected-默认缺省 的区别
public 公共,加上这个修饰的属性和方法,可以在程序的任何其它地方访问 . private 私有,和public相反,加上这个修饰的属性和方法,只允许在本类中访问. protected 保护,位于 ...
- The minimum required Cuda capability is 3.7.
stackoverflow上早有讨论 https://stackoverflow.com/questions/33651810/the-minimum-required-cuda-capability ...
- ActiveMQ持久化及测试(转)
转:http://blog.csdn.net/xyw_blog/article/details/9128219 ActiveMQ持久化 消息持久性对于可靠消息传递来说应该是一种比较好的方法,有了消息持 ...
- Windows 7系统如何设置计划任务？
Windows 7系统如何设置计划任务? 问题描述:Windows 7系统如何设置计划任务? 任务计划概述:任务计划,可以将任何脚本.程序或文档安排在某个时间运行.“任务计划”在每次启动windows ...
- memcached完全剖析--1. memcached的基础
翻译一篇技术评论社的文章,是讲memcached的连载.fcicq同学说这个东西很有用,希望大家喜欢. 发表日:2008/7/2 作者:长野雅广(Masahiro Nagano) 原文链接:http: ...
- Linux安装ElasticSearch-2.2.0-分词器插件（Mmseg）
1.在gitpub上搜索elasticsearch-analysis,能够看到所有elasticsearch的分词器: 2.安装Mmseg分词器:https://github.com/medcl/el ...
- ASP.NET Core Linux环境安装并运行项目
原文地址:https://blog.csdn.net/u014368040/article/details/79192622 一 安装环境 1. 从微软官网下载 Linux版本的.NetCoreSd ...
- git detached
git提交的时候,本地已经提交,却怎么也推送不到服务器,也没显示错误,只显示 everything-up-to-date : 原因是git不在master分支,而是处于detached head(匿名 ...
- dbms_random.seed
语法: DBMS_RANDOM.SEED ( val IN BINARY_INTEGER); DBMS_RANDOM.SEED ( val IN VARCHAR2); val: Seed number ...
- cassandra java 兼容性问题及其解决方法
1.安装 http://wiki.apache.org/cassandra/DebianPackaging 2.java兼容性问题 由于cassandra运行于sun jdk6上,而ubuntu默认是 ...