Vue.js實現的計算器功能完整示例
這篇文章主要介紹了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>
var calculator = new Vue({
el:'#calculator',
data:{
inputShow:{
value:'0'
}
},
components:{
'input-box':{
props:['inputShow'],
computed: {
value:function () {
return this.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"; //數字型別說明是上個計算結果,清空內容
}
var str ='' + this.inputShow.value; //輸入內容時,將輸入框內容轉為字串型別
var len = str.length;
var arr = ["+","-","×","÷"];
var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join(''); //parseInt(str.split('').reverse().join('')))是獲取輸入框內最後一串數字,再反轉回來 ,num為輸入框內最後一串數字
var nlen = 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;
}else if(!(arr.indexOf(param) != -1)){ //判斷輸入框內最後一個字元不為運算子
this.inputShow.value =str.substring(0,str.length-nlen) + param; //輸入框內最後一串數字為0時,刪除0拼接
}
}
},
clearValue(){ //清空輸入框內容
this.inputShow.value = '0';
},
calValue(){ //計算結果
var str = this.inputShow.value;
str = str.replace('×','*').replace('÷','/').replace('%','*0.01'); //替換運算子
try{
this.inputShow.value = eval(str); //若使用者輸入內容不符合運算規則,不計算
}catch(error){
return;
}
},
squareValue(){ //平方計算
var str = this.inputShow.value;
this.inputShow.value = Math.pow(eval(str),2)
},
radicalValue(){ //開根號計算
var str = this.inputShow.value;
this.inputShow.value = Math.sqrt(eval(str));
},
backValue(){ //刪除鍵,刪除單個字元
var str = 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;
}
#calculator #btn-list .btn-radius:active {
background: #ffffff;
}
#calculator #btn-list .clear-marginleft {
margin-left: 0;
}
#calculator #btn-list .font-14 {
font-size: 14px;
}
#calculator #btn-list .color-red {
color: #ff5050
}
#calculator #btn-list .color-blue {
color: #00b4ff
}
#calculator #btn-list .btn-30 {
width: 29px;
height: 29px;
}
#calculator #btn-list .btn-70 {
width: 70px;
height: 29px;
}
3. 使用本站HTML/CSS/JS線上執行測試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測試執行效果：
4. 使用時記得改下css路徑,在html中引入vue
5. 博主技術有限,正負號部分功能還有問題待完善.計算器還有一些未知的小Bug,感興趣的讀者可以在這個基礎上進行擴充套件。
原文地址：https://www.jb51.net/article/143623.htm
PS：這裡再為大家推薦幾款計算工具供大家參考：
線上數學表示式簡單轉換/計算工具：
http://tools.jb51.net/jisuanqi/exp_jisuanqi
線上一元函式（方程）求解計算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科學計算器線上使用_高階計算器線上計算：
http://tools.jb51.net/jisuanqi/jsqkexue
線上計算器_標準計算器：
http://tools.jb51.net/jisuanqi/jsq
希望本文所述對大家vue.js程式設計有所幫助。
您可能感興趣的文章: