Vue實現(xiàn)簡單計算器
本文實例為大家分享了Vue實現(xiàn)簡單計算器的具體代碼，供大家參考，具體內(nèi)容如下
案例需求
1、通過v-model 指令 實現(xiàn)數(shù)值A(chǔ)和數(shù)值B的綁定2、給計算按鈕綁定事件，實現(xiàn)計算邏輯3、將計算結(jié)果綁定到對應(yīng)位置
實現(xiàn)靜態(tài)頁面
<div id=’app’> <h1>簡單計算器</h1> <div><span>數(shù)值A(chǔ):</span><span><input type='text' v-model=’a’></span></div> <div><span>數(shù)值B:</span><span type='text' v-model=’b’></span></div> <div><button>計算</button></div> <div><span>計算結(jié)果</span><span></span></div></div>
導(dǎo)入Vue
<script type='text/javascript' src='http://www.leifengta.com.cn/bcjs/js/vue.js'></script>
為靜態(tài)頁面添加指令
<div id=’app’> <h1>簡單計算器</h1> <div><span>數(shù)值A(chǔ):</span> <span><input type='text' v-model=’a’> </span> </div> <div> <span>數(shù)值B:</span> <span><input type='text' v-model=’b’> </span> </div> <div> <button v-on:click='handle'>計算</button> </div> <div><span>計算結(jié)果</span><span v-text='result'></span></div></div>
設(shè)置 計算功能
<script type='text/javascript'> /* */ var vm = new Vue({ el: '#app', data: {a: ’’,b: ’’,result: ’’ }, methods: {handle: function () { // 實現(xiàn)計算邏輯 this.result = parseInt(this.a) + parseInt(this.b);} } });</script>
最終代碼
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>簡單計算器</title></head><body> <div id=’app’> <h1>簡單計算器</h1> <div><span>數(shù)值A(chǔ):</span> <span><input type='text' v-model=’a’> </span> </div> <div> <span>數(shù)值B:</span> <span><input type='text' v-model=’b’> </span> </div> <div> <button v-on:click='handle'>計算</button> </div> <div><span>計算結(jié)果</span><span v-text='result'></span></div> </div> <script type='text/javascript' src='http://www.leifengta.com.cn/bcjs/js/vue.js'></script> <script type='text/javascript'> /* */ var vm = new Vue({ el: '#app', data: {a: ’’,b: ’’,result: ’’ }, methods: {handle: function () { // 實現(xiàn)計算邏輯 this.result = parseInt(this.a) + parseInt(this.b);} } }); </script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 編程語言PHP在Web開發(fā)領(lǐng)域的優(yōu)勢在哪？2. 詳解Android studio 動態(tài)fragment的用法3. 圖文詳解vue中proto文件的函數(shù)調(diào)用4. 什么是python的自省5. 基于android studio的layout的xml文件的創(chuàng)建方式6. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)7. 解決Android studio xml界面無法預(yù)覽問題8. Android如何加載Base64編碼格式圖片9. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)10. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案
網(wǎng)公網(wǎng)安備