使用Vue.js怎么實現(xiàn)一個計算器功能
使用Vue.js怎么實現(xiàn)一個計算器功能？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
創(chuàng)新互聯(lián)公司于2013年成立，我們提供高端網(wǎng)站建設(shè)、重慶小程序開發(fā)、電商視覺設(shè)計、成都App定制開發(fā)及網(wǎng)絡(luò)營銷搜索優(yōu)化服務(wù)，在傳統(tǒng)互聯(lián)網(wǎng)與移動互聯(lián)網(wǎng)發(fā)展的背景下，我們堅守著用標(biāo)準(zhǔn)的設(shè)計方案與技術(shù)開發(fā)實力作基礎(chǔ)，以企業(yè)及品牌的互聯(lián)網(wǎng)商業(yè)目標(biāo)為核心，為客戶打造具商業(yè)價值與用戶體驗的互聯(lián)網(wǎng)+產(chǎn)品。
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]"){ //判斷輸入框內(nèi)容是否為數(shù)字類型
this.inputShow.value = "0"; //數(shù)字類型說明是上個計算結(jié)果,清空內(nèi)容
}
var str ='' + this.inputShow.value; //輸入內(nèi)容時,將輸入框內(nèi)容轉(zhuǎn)為字符串類型
var len = str.length;
var arr = ["+","-","×","÷"];
var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join(''); //parseInt(str.split('').reverse().join('')))是獲取輸入框內(nèi)最后一串?dāng)?shù)字,再反轉(zhuǎn)回來 ,num為輸入框內(nèi)最后一串?dāng)?shù)字
var nlen = num.length;
if((num!= '0' && param != '.')|| (param == '.'&& num.indexOf(".")==-1)){ //輸入框內(nèi)最后一串?dāng)?shù)字不為0時拼接字符串
if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){ //若一開始輸入內(nèi)容為運算符,輸入無效
return;
}
this.inputShow.value += param; //拼接輸入內(nèi)容
}else{
arr.push("%");
if(param == '.'){ //若num中已有小數(shù)點,輸入內(nèi)容為小數(shù)點,視為無效
return;
}else if(!(arr.indexOf(param) != -1)){ //判斷輸入框內(nèi)最后一個字符不為運算符
this.inputShow.value =str.substring(0,str.length-nlen) + param; //輸入框內(nèi)最后一串?dāng)?shù)字為0時,刪除0拼接
}
}
},
clearValue(){ //清空輸入框內(nèi)容
this.inputShow.value = '0';
},
calValue(){ //計算結(jié)果
var str = this.inputShow.value;
str = str.replace('×','*').replace('÷','/').replace('%','*0.01'); //替換運算符
try{
this.inputShow.value = eval(str); //若用戶輸入內(nèi)容不符合運算規(guī)則,不計算
}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(){ //正負(fù)號取值
var str = this.inputShow.value;
var num = (''+parseInt(str.split('').reverse().join(''))).split('').reverse().join(''); //獲取輸入框內(nèi)最后遺傳數(shù)字
var nlen = num.length;
debugger;
if(!isNaN( parseInt(str.charAt(str.length-1))) && num != 0){ //當(dāng)輸入框末位字符為數(shù)字且最后一串?dāng)?shù)字不為0時,取正負(fù)
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, h2, h3, h4, h5, h6, h7, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
h2, h3, h4, h5, h6, h7{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;}關(guān)于使用Vue.js怎么實現(xiàn)一個計算器功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
分享名稱：使用Vue.js怎么實現(xiàn)一個計算器功能
分享路徑：http://jinyejixie.com/article14/jpdsge.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站排名、軟件開發(fā)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、ChatGPT
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 服務(wù)器租賃虛擬主機建造網(wǎng)站有哪些便利之處？ 2021-01-25
- 選擇虛擬主機服務(wù)器對網(wǎng)站排名的影響 2016-11-12
- 虛擬主機的選擇 2022-07-23
- 選購網(wǎng)站虛擬主機（空間）需要注意的一些方面 2022-06-17
- 香港虛擬主機租用要怎么選擇？ 2022-10-08
- 要買虛擬主機有什么原因？虛擬主機空間有什么用？ 2021-02-19
- 虛擬主機與云服務(wù)器的區(qū)別 2023-04-03
- 如何選擇合適的虛擬主機？ 2022-07-11
- 建網(wǎng)站用虛擬主機有哪些作用與優(yōu)點？ 2022-10-20
- 虛擬主機和虛擬服務(wù)器有什么區(qū)別？ 2021-01-28
- 個人網(wǎng)站建設(shè)如何選擇虛擬主機服務(wù)商-網(wǎng)站建設(shè)創(chuàng)新互聯(lián)科技 2021-11-24
- 虛擬主機怎么選？ 2022-07-15