Vue.js实现的计算器功能完整示例

这篇文章主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js" title="vue.js">vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下，本文实例讲述了Vue.js实现的计算器功能。分享给大家供大家参考，具体如下：

1. HTML部分代码

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet"type="text/css"href="css/css.css"rel="external nofollow">

<script type="text/javascript"src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

<meta charset="UTF-8">

<title>my-calculator</title>

</head>

<body>

<div id="calculator">

<input-box v-bind:input-show="inputShow">

</input-box>

<btn-list>

<div @click="clearValue()"class=" btn-30 btn-radius color-red clear-marginleft">C</div>

<div class=" btn-30 btn-radius color-blue">+/-</div>

<div @click="inputValue(\'%\')"class=" btn-30 btn-radius color-blue">%</div>

<div @click="backValue()"class=" btn-70 btn-radius color-red font-14">←</div>

<div @click="inputValue(\'7\')"class=" btn-30 btn-radius clear-marginleft">7</div>

<div @click="inputValue(\'8\')"class=" btn-30 btn-radius">8</div>

<div @click="inputValue(\'9\')"class=" btn-30 btn-radius">9</div>

<div @click="squareValue()"class=" btn-30 btn-radius color-blue font-14">×²</div>

<div @click="radicalValue()"class=" btn-30 btn-radius color-blue font-12">√</div>

<div @click="inputValue(\'4\')"class=" btn-30 btn-radius clear-marginleft">4</div>

<div @click="inputValue(\'5\')"class=" btn-30 btn-radius">5</div>

<div @click="inputValue(\'6\')"class=" btn-30 btn-radius">6</div>

<div @click="inputValue(\'×\')"class=" btn-30 btn-radius color-blue font-14">×</div>

<div @click="inputValue(\'÷\')"class=" btn-30 btn-radius color-blue font-12">÷</div>

<div @click="inputValue(\'1\')"class=" btn-30 btn-radius clear-marginleft">1</div>

<div @click="inputValue(\'2\')"class=" btn-30 btn-radius">2</div>

<div @click="inputValue(\'3\')"class=" btn-30 btn-radius">3</div>

<div @click="inputValue(\'+\')"class=" btn-30 btn-radius color-blue font-14">+</div>

<div @click="inputValue(\'-\')"class=" btn-30 btn-radius color-blue font-14">-</div>

<div @click="inputValue(\'0\')"class=" btn-70 btn-radius clear-marginleft">0</div>

<div @click="inputValue(\'.\')"class=" btn-30 btn-radius">.</div>

<div @click="calValue()"class=" btn-70 btn-radius color-red font-14">=</div>

</btn-list>

</div>

<script>

varcalculator = newVue({

el:\'#calculator\',

data:{

inputShow:{

value:\'0\'

}

},

components:{

\'input-box\':{

props:[\'inputShow\'],

computed: {

value:function() {

returnthis.inputShow.value

}

},

template:\'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">\'

},

\'btn-list\':{

template:\'<div id="btn-list"><slot></slot></div>\'

}

},

methods:{

inputValue(param){

if(Object.prototype.toString.call(this.inputShow.value) == "[object Number]"){ //判断输入框内容是否为数字类型

this.inputShow.value = "0"; //数字类型说明是上个计算结果,清空内容

}

varstr =\'\'+ this.inputShow.value; //输入内容时,将输入框内容转为字符串类型

varlen = str.length;

vararr = ["+","-","×","÷"];

varnum = (\'\'+parseFloat(str.split(\'\').reverse().join(\'\'))).split(\'\').reverse().join(\'\'); //parseInt(str.split(\'\').reverse().join(\'\')))是获取输入框内最后一串数字,再反转回来 ,num为输入框内最后一串数字

varnlen = num.length;

if((num!= \'0\'&& param != \'.\')|| (param == \'.\'&& num.indexOf(".")==-1)){ //输入框内最后一串数字不为0时拼接字符串

if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){ //若一开始输入内容为运算符,输入无效

return;

}

this.inputShow.value += param; //拼接输入内容

}else{

arr.push("%");

if(param == \'.\'){ //若num中已有小数点,输入内容为小数点,视为无效

return;

}elseif(!(arr.indexOf(param) != -1)){ //判断输入框内最后一个字符不为运算符

this.inputShow.value =str.substring(0,str.length-nlen) + param; //输入框内最后一串数字为0时,删除0拼接

}

},

clearValue(){ //清空输入框内容

this.inputShow.value = \'0\';

},

calValue(){ //计算结果

varstr = this.inputShow.value;

str = str.replace(\'×\',\'*\').replace(\'÷\',\'/\').replace(\'%\',\'*0.01\'); //替换运算符

try{

this.inputShow.value = eval(str); //若用户输入内容不符合运算规则,不计算

}catch(error){

return;

}

},

squareValue(){ //平方计算

varstr = this.inputShow.value;

this.inputShow.value = Math.pow(eval(str),2)

},

radicalValue(){ //开根号计算

varstr = this.inputShow.value;

this.inputShow.value = Math.sqrt(eval(str));

},

backValue(){ //删除键,删除单个字符

varstr = this.inputShow.value;

if(str.length == 1){

this.inputShow.value = "0";

}else{

this.inputShow.value = str.slice(0,str.length-1);

}

},

/*oppositeValue(){ //正负号取值

var str = this.inputShow.value;

var num = (\'\'+parseInt(str.split(\'\').reverse().join(\'\'))).split(\'\').reverse().join(\'\'); //获取输入框内最后遗传数字

var nlen = num.length;

debugger;

if(!isNaN( parseInt(str.charAt(str.length-1))) && num != 0){ //当输入框末位字符为数字且最后一串数字不为0时,取正负

this.inputShow.value = str.substring(0,str.length-nlen)+`(-${num})`;

}

}*/

}

})

</script>

</body>

</html>

2. CSS部分代码

@charset "utf-8";

body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {
　　margin: 0;
　　padding: 0;
　　-webkit-text-size-adjust: none
}

h1, h2, h3, h4, h5, h6 {
　　font-size: 12px;
　　font-weight: normal
}

body>div {
　　margin: 0 auto
}

div {
　　text-align: left
}

a img {
　　border: 0
}

body {
　　color: #333;
　　text-align: center;
　　font: 12px "微软雅黑";
}

ul, ol, li {
　　list-style-type: none;
　　vertical-align: 0
}

a {
　　outline-style: none;
　　color: #535353;
　　text-decoration: none
}

a:hover {
　　color: #D40000;
　　text-decoration: none
}

.clear {
　　height: 0;
　　overflow: hidden;
　　clear: both
}
/* calculator */
#calculator {
　　width: 200px;
　　height: 245px;
　　padding: 10px;
　　border: 1px solid #e5e5e5;
　　background: #f8f8f8;
　　-moz-border-radius: 3px;
　　-webkit-border-radius: 3px;
　　border-radius: 3px;
　　box-shadow: 0px 0px 10px #f2f2f2;
　　-moz-box-shadow: 0px 0px 10px #f2f2f2;
　　-webkit-box-shadow: 0px 0px 10px #f2f2f2;
　　margin: 40px auto 0 auto;
}

#calculator #input-box {
　　margin: 0;
　　width: 187px;
　　padding: 9px 5px;
　　height: 14px;
　　border: 1px solid #e5e5e5;
　　border-radius: 3px;
　　-webkit-border-radius: 3px;
　　-moz-border-radius: 3px;
　　background: #FFF;
　　text-align: right;
　　line-height: 14px;
　　font-size: 12px;
　　font-family: Verdana, Geneva, sans-serif;
　　color: #666;
　　outline: none;
　　text-transform: uppercase;
}

#calculator #btn-list {
　　width: 200px;
　　overflow: hidden;
}

#calculator #btn-list .btn-radius {
　　border-radius: 2px;
　　-webkit-border-radius: 2px;
　　-moz-border-radius: 2px;
　　border: 1px solid #e5e5e5;
　　background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));
　　background: -moz-linear-gradient(top, #f7f7f7,#ebebeb);
　　filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);
　　line-height: 29px;
　　text-align: center;
　　text-shadow: 0px 1px 1px #FFF;
　　font-weight: bold;
　　font-family: Verdana, Geneva, sans-serif;
　　color: #666;
　　float: left;
　　margin-left: 11px;
　　margin-top: 11px;
　　font-size: 12px;
　　cursor: pointer;
}