Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
案例需求
1、通過v-model 指令 實(shí)現(xiàn)數(shù)值A(chǔ)和數(shù)值B的綁定2、給計(jì)算按鈕綁定事件，實(shí)現(xiàn)計(jì)算邏輯3、將計(jì)算結(jié)果綁定到對(duì)應(yīng)位置
實(shí)現(xiàn)靜態(tài)頁面
<div id=’app’> <h1>簡(jiǎn)單計(jì)算器</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>計(jì)算</button></div> <div><span>計(jì)算結(jié)果</span><span></span></div></div>
導(dǎo)入Vue
<script type='text/javascript' src='http://www.intensediesel.com/bcjs/js/vue.js'></script>
為靜態(tài)頁面添加指令
<div id=’app’> <h1>簡(jiǎn)單計(jì)算器</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'>計(jì)算</button> </div> <div><span>計(jì)算結(jié)果</span><span v-text='result'></span></div></div>
設(shè)置 計(jì)算功能
<script type='text/javascript'> /* */ var vm = new Vue({ el: '#app', data: {a: ’’,b: ’’,result: ’’ }, methods: {handle: function () { // 實(shí)現(xiàn)計(jì)算邏輯 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>簡(jiǎn)單計(jì)算器</title></head><body> <div id=’app’> <h1>簡(jiǎn)單計(jì)算器</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'>計(jì)算</button> </div> <div><span>計(jì)算結(jié)果</span><span v-text='result'></span></div> </div> <script type='text/javascript' src='http://www.intensediesel.com/bcjs/js/vue.js'></script> <script type='text/javascript'> /* */ var vm = new Vue({ el: '#app', data: {a: ’’,b: ’’,result: ’’ }, methods: {handle: function () { // 實(shí)現(xiàn)計(jì)算邏輯 this.result = parseInt(this.a) + parseInt(this.b);} } }); </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. XML入門的常見問題(三)2. HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）3. ASP基礎(chǔ)入門第四篇(腳本變量、函數(shù)、過程和條件語句)4. HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)5. .NET Framework各版本(.NET2.0 3.0 3.5 4.0)區(qū)別6. ASP將數(shù)字轉(zhuǎn)中文數(shù)字(大寫金額)的函數(shù)7. XML在語音合成中的應(yīng)用8. jscript與vbscript 操作XML元素屬性的代碼9. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)10. 不要在HTML中濫用div
網(wǎng)公網(wǎng)安備