Vue.js實現立體計算器

更新時間：2020年02月22日 13:45:48 作者：evail_

這篇文章主要為大家詳細介紹了Vue.js實現立體計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue.js 制作立體計算器的具體方法，供大家參考，具體內容如下

項目效果圖

這是一個簡單的項目實現加減乘除運算

項目結構

代碼展示

計算器1.0.html

<!DOCTYPE html>
<html>
 <head>
 <title>計算器</title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>
 <body>
 <div id="big">
 <div id="c" @click="clear">c</div>
 <div id="a1" @click="add(1)">1</div>
 <div id="a2" @click="add(2)">2</div>
 <div id="a3" @click="add(3)">3</div>
 <div id="a4" @click="add(4)">4</div>
 <div id="a5" @click="add(5)">5</div>
 <div id="a6" @click="add(6)">6</div>
 <div id="a7" @click="add(7)">7</div>
 <div id="a8" @click="add(8)">8</div>
 <div id="a9" @click="add(9)">9</div>
 <div id="a0" @click="add(0)">0</div>
 <div id="a16" @click="add('+')">+</div>
 <div id="a15" @click="add('-')">-</div>
 <div id="a14" @click="add('/')">/</div>
 <div id="a13" @click="add('*')">X</div>
 <div id="a12" @click="run">=</div>
 <div id="a11" @click="add('.')">.</div>
 <input type="text" readonly="readonly" v-model="res" id="a17">
 </div>
 <script src="js/vue/vue.js"></script>
 <script src="js/app.js"></script>
 </body>
</html>

style.css

#big {
 position: relative;
 width: 355px;
 height: 240px;
 background-color: #999cff;
 margin: 100px auto;
 border-radius: 10px;
 box-shadow: 15px 15px 15px #000;
 cursor: pointer;
 }
 
 #big div {
 position: absolute;
 box-shadow: 5px 5px 5px #000;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 width: 80px;
 height: 40px;
 border-radius: 5px;
 }
 
 #c {
 background-color: #FFFFFF;
 left: 10px;
 top: 7px;
 }
 
 #a7 {
 background-color: #FFFFFF;
 left: 10px;
 top: 55px;
 }
 
 #a4 {
 background-color: #FFFFFF;
 left: 10px;
 top: 100px;
 }
 
 #a1 {
 background-color: #FFFFFF;
 left: 10px;
 top: 145px;
 }
 
 #a0 {
 background-color: #FFFFFF;
 left: 10px;
 top: 190px;
 }
 
 #a8 {
 background-color: #FFFFFF;
 left: 95px;
 top: 55px;
 }
 
 #a5 {
 background-color: #FFFFFF;
 left: 95px;
 top: 100px;
 }
 
 #a2 {
 background-color: #FFFFFF;
 left: 95px;
 top: 145px;
 }
 
 #a11 {
 background-color: #FFFFFF;
 left: 95px;
 top: 190px;
 }
 
 #a9 {
 background-color: #FFFFFF;
 left: 180px;
 top: 55px;
 }
 
 #a6 {
 background-color: #FFFFFF;
 left: 180px;
 top: 100px;
 }
 
 #a3 {
 background-color: #FFFFFF;
 left: 180px;
 top: 145px;
 }
 
 #a12 {
 background-color: #FFFFFF;
 left: 180px;
 top: 190px;
 }
 
 #a16 {
 background-color: #f44336;
 left: 265px;
 top: 55px;
 }
 
 #a15 {
 background-color: #f44336;
 left: 265px;
 top: 100px;
 }
 
 #a14 {
 background-color: #f44336;
 left: 265px;
 top: 145px;
 }
 
 #a13 {
 background-color: #f44336;
 left: 265px;
 top: 190px;
 }
 
 #a17 {
 position: absolute;
 box-shadow: inset 5px 5px 5px #000;
 text-align: center;
 font-size: 20px;
 width: 250px;
 height: 40px;
 background-color: #99ffa6;
 border-radius: 5px;
 left: 95px;
 top: 5px;
 }

app.js

var app = new Vue({
 el: '#big',
 data: {
 res: ''
 },
 methods: {
 add: function(index) {
 this.res += index;
 },
 run: function() {
 try {
 this.res = eval(this.res);
 } catch(exception) {
 this.res = '';
 alert("表達式輸入錯誤");
 }
 },
 clear: function() {
 this.res = '';
 }
 }
 })

用相對布局把計算器的每一個按鍵定好位置，加上一些圓角，顏色可以根據自己喜歡的顏色來給，實現3D效果最關鍵的是要加上陰影效果。注意input標簽的陰影要在內側。采用Vue.js框架使用v-model指令實現input標簽的雙向綁定。在methods屬性中添加函數使用v-on指令綁定事件，這里使用縮寫@click ,add函數的功能是完成字符串的拼接，run函數調用eval函數將拼接好的字符解析并運算出結果賦給res，如果字符串格式有誤拋出異常并通過alert函數反饋給用戶然后把res清除。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: