vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
一、導(dǎo)入vue.js
可以用cdn，也可以用內(nèi)嵌去官網(wǎng)下載插件https://vuejs.org/js/vue.js.
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
二、前端頁面
我用了一個(gè)表格，話不多說直接上代碼
<div id="vuetest">
<table>
<tr>
<td>數(shù)學(xué)</td>
<td><input type="text" v-model.number="math"></td>
</tr>
<tr>
<td>物理</td>
<td><input type="text" v-model.number="physics"></td>
</tr>
<tr>
<td>英語</td>
<td><input type="text" v-model.number="english"></td>
<tr>
<td>總分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>
</tr>
</table>
</div>
二、 js代碼
1.創(chuàng)建一個(gè) vue容器 在el中寫你的容器id。
2.在data中寫你的數(shù)據(jù)值，注意與html頁面中的v-model.number=中寫的相對(duì)應(yīng)。
（v-model是負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理）
math：后面也可以寫固定的值像math:“90”,以此類推
3.綁定你的表達(dá)式，用computed監(jiān)控前面定義的變量并寫一個(gè)方法。
注意:{{}}里面要與js里面對(duì)應(yīng)
我簡(jiǎn)單寫了個(gè)求和與平均值的方法
4.在文本框里輸入數(shù)字就可以自動(dòng)進(jìn)行動(dòng)態(tài)的求和，平均值計(jì)算了，是不是很方便。
js代碼如下
var vuetest = new Vue({
el:'#vuetest',
data:{
math:'',
physics:'',
english:'',
},
computed :{
sum:function () {
return parseFloat(this.math)+this.physics+this.english;
},
average :function(){
return Math.round(this.sum/3);
}
}
});
效果
以上這篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?點(diǎn)擊刪除常用方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取完整步驟
Vue的數(shù)據(jù)綁定功能非常強(qiáng)大,很適合用來讀取Excel內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)excel文件的導(dǎo)入和讀取的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問題
這篇文章主要介紹了詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文主要介紹了vue-admin-template解決登錄和跨域問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了Vue2中實(shí)現(xiàn)雙擊事件的幾種常見方法,Vue2中處理雙擊事件的方法包括使用@dblclick指令、addEventListener方法和第三方庫,這些方法提供了靈活的解決方案,以滿足不同的需求,需要的朋友可以參考下2024-11-11
vue用Object.defineProperty手寫一個(gè)簡(jiǎn)單的雙向綁定的示例
這篇文章主要介紹了用Object.defineProperty手寫一個(gè)簡(jiǎn)單的雙向綁定的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)
這篇文章主要介紹了Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要給大家介紹了關(guān)于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02