Vue實現簡單計算器
本文實例為大家分享了Vue實現簡單計算器的具體代碼，供大家參考，具體內容如下
案例需求
1、通過v-model 指令 實現數值A和數值B的綁定2、給計算按鈕綁定事件，實現計算邏輯3、將計算結果綁定到對應位置
實現靜態頁面
<div id=’app’> <h1>簡單計算器</h1> <div><span>數值A:</span><span><input type='text' v-model=’a’></span></div> <div><span>數值B:</span><span type='text' v-model=’b’></span></div> <div><button>計算</button></div> <div><span>計算結果</span><span></span></div></div>
導入Vue
<script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/js/vue.js'></script>
為靜態頁面添加指令
<div id=’app’> <h1>簡單計算器</h1> <div><span>數值A:</span> <span><input type='text' v-model=’a’> </span> </div> <div> <span>數值B:</span> <span><input type='text' v-model=’b’> </span> </div> <div> <button v-on:click='handle'>計算</button> </div> <div><span>計算結果</span><span v-text='result'></span></div></div>
設置 計算功能
<script type='text/javascript'> /* */ var vm = new Vue({ el: '#app', data: {a: ’’,b: ’’,result: ’’ }, methods: {handle: function () { // 實現計算邏輯 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>數值A:</span> <span><input type='text' v-model=’a’> </span> </div> <div> <span>數值B:</span> <span><input type='text' v-model=’b’> </span> </div> <div> <button v-on:click='handle'>計算</button> </div> <div><span>計算結果</span><span v-text='result'></span></div> </div> <script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/js/vue.js'></script> <script type='text/javascript'> /* */ var vm = new Vue({ el: '#app', data: {a: ’’,b: ’’,result: ’’ }, methods: {handle: function () { // 實現計算邏輯 this.result = parseInt(this.a) + parseInt(this.b);} } }); </script></body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. vue實現web在線聊天功能2. JavaScript實現頁面動態驗證碼的實現示例3. JavaEE SpringMyBatis是什么? 它和Hibernate的區別及如何配置MyBatis4. Springboot 全局日期格式化處理的實現5. SpringBoot+TestNG單元測試的實現6. 完美解決vue 中多個echarts圖表自適應的問題7. 解決Android Studio 格式化 Format代碼快捷鍵問題8. 在Chrome DevTools中調試JavaScript的實現9. Python使用urlretrieve實現直接遠程下載圖片的示例代碼10. Java使用Tesseract-Ocr識別數字
網公網安備