Vue.js實(shí)現(xiàn)立體計(jì)算器
本文實(shí)例為大家分享了Vue.js 制作立體計(jì)算器的具體方法,供大家參考,具體內(nèi)容如下
項(xiàng)目效果圖
這是一個(gè)簡(jiǎn)單的項(xiàng)目實(shí)現(xiàn)加減乘除運(yùn)算
項(xiàng)目結(jié)構(gòu)
代碼展示
計(jì)算器1.0.html
<!DOCTYPE html> <html> <head> <title>計(jì)算器</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("表達(dá)式輸入錯(cuò)誤"); } }, clear: function() { this.res = ''; } } })
用相對(duì)布局把計(jì)算器的每一個(gè)按鍵定好位置,加上一些圓角,顏色可以根據(jù)自己喜歡的顏色來(lái)給,實(shí)現(xiàn)3D效果最關(guān)鍵的是要加上陰影效果。注意input標(biāo)簽的陰影要在內(nèi)側(cè)。采用Vue.js框架使用v-model指令實(shí)現(xiàn)input標(biāo)簽的雙向綁定。在methods屬性中添加函數(shù) 使用v-on指令綁定事件,這里使用縮寫(xiě)@click ,add函數(shù)的功能是完成字符串的拼接,run函數(shù)調(diào)用eval函數(shù)將拼接好的字符解析并運(yùn)算出結(jié)果賦給res,如果字符串格式有誤拋出異常并通過(guò)alert函數(shù)反饋給用戶(hù)然后把res清除。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
- 使用Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
- vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能示例
- Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
- vue實(shí)現(xiàn)簡(jiǎn)單加法計(jì)算器
- vue實(shí)現(xiàn)計(jì)算器功能
- Vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器
- vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
- Vue實(shí)現(xiàn)手機(jī)計(jì)算器
- vue實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器功能
相關(guān)文章
vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法
這篇文章主要介紹了vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個(gè)基于Typescript開(kāi)發(fā)的針對(duì)Vue3開(kāi)發(fā)的UI組件庫(kù),由TuSimple(圖森未來(lái))公司開(kāi)發(fā)并開(kāi)源,需要的朋友可以參考下2023-08-08通過(guò)vue-cli來(lái)學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問(wèn)題
這篇文章主要介紹了隨著Vue-cli來(lái)'學(xué)'并'改'Webpack之多環(huán)境配置和發(fā)布的相關(guān)知識(shí),本文將會(huì)根據(jù)一些實(shí)際的業(yè)務(wù)需求,先學(xué)習(xí)vue-cli生成的模版,然后在進(jìn)行相關(guān)修改,感興趣的朋友一起跟著小編學(xué)習(xí)吧2017-12-12使用Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02Vue之data定義的三種方式及區(qū)別說(shuō)明
這篇文章主要介紹了Vue之data定義的三種方式及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)
最近遇到這樣的需求輸入連號(hào)事件,需要在表格中輸入物流單號(hào),物流號(hào)碼,生成的數(shù)量,名稱(chēng),點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號(hào)物流單號(hào),本文重點(diǎn)介紹vue3輸入單號(hào)和張數(shù),自動(dòng)生成連號(hào)的單號(hào),感興趣的朋友一起看看吧2024-02-02Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時(shí)間,對(duì)遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下2018-07-07去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證)
我們?cè)谑褂胿ue 腳手架時(shí),為了規(guī)范團(tuán)隊(duì)的代碼格式,會(huì)有一個(gè)代碼規(guī)范檢測(cè),如果不符合規(guī)范就會(huì)報(bào)錯(cuò),有時(shí)候我們不想按照他的規(guī)范去寫(xiě)。這時(shí)我們需要關(guān)閉,這里腳本之家小編給大家?guī)?lái)了去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證),一起看看吧2018-03-03