欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js實(shí)現(xiàn)立體計(jì)算器

 更新時(shí)間:2020年02月22日 13:45:48   作者:evail_  
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)立體計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法

    vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法

    這篇文章主要介紹了vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-02-02
  • vue2+element?ui?中的el-table?選中當(dāng)前行當(dāng)前行變色的實(shí)現(xiàn)代碼

    vue2+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-07
  • vue中v-for 循環(huán)對(duì)象中的屬性

    vue中v-for 循環(huán)對(duì)象中的屬性

    這篇文章主要介紹了 vue中v-for 循環(huán)對(duì)象中的屬性,文章圍繞v-for 循環(huán)對(duì)象的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下,希望對(duì)大家有所幫助
    2021-11-11
  • vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解

    vue3+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)題

    通過(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ì)算器

    使用Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器

    這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • Vue之data定義的三種方式及區(qū)別說(shuō)明

    Vue之data定義的三種方式及區(qū)別說(shuō)明

    這篇文章主要介紹了Vue之data定義的三種方式及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)

    vue3輸入單號(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-02
  • Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解

    Vue路由鉤子之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)證)

    去掉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

最新評(píng)論