vue 修改 data 數(shù)據(jù)問(wèn)題并實(shí)時(shí)顯示的方法
首先，定義一個(gè)變量：
（以下以本人寫(xiě)的為例）
首先定義一個(gè)變量：
然后，給變量賦值：
如果想要修改數(shù)據(jù)，主要代碼如下:
然后界面上要記得綁定數(shù)據(jù)id:
就Ok了。
拓展知識(shí)：Vue刷新修改頁(yè)面中的數(shù)據(jù)方法
因?yàn)閂ue對(duì)象一旦生成之后,如果只是修改Vue對(duì)象中的數(shù)據(jù),在頁(yè)面上是不會(huì)自動(dòng)更新的,得用Vue.set()函數(shù)來(lái)進(jìn)行修改,函數(shù)格式為Vue.set(data,'para','value'),其中data為Vue創(chuàng)建時(shí)傳輸?shù)膁ata對(duì)象名,后面兩個(gè)參數(shù)分別是data對(duì)象中的變量名稱(chēng)與值
頁(yè)面初始化代碼:
<script type="text/javascript" charset="utf-8">
mui.init();
var data = {
dx: 1400,
wcyj: 0,
jj: 0,
tcbl: 0,
tcje: 0,
total: 0
};
$(document).ready(function() {
var v = new Vue({
el: '#result',
data: data
})
})
</script>
需要用js對(duì)Vue模板中的變量進(jìn)行修改的代碼:
<script type="text/javascript">
function calc() {
$("#result").show();
yj = $("#yeji").val();
Vue.set(data, 'wcyj', yj);
if(yj < 40000) {
Vue.set(data, 'tcbl', 0.04);
Vue.set(data, 'jj', 0);
} else if(yj < 80000) {
Vue.set(data, 'tcbl', 0.05);
Vue.set(data, 'jj', 400);
} else if(yj < 120000) {
Vue.set(data, 'tcbl', 0.06);
Vue.set(data, 'jj', 1000);
} else {
Vue.set(data, 'tcbl', 0.07);
Vue.set(data, 'jj', 1500);
}
data.tcje = (yj * data.tcbl).toFixed(1);
data.total = (parseFloat(data.tcje) + parseFloat(data.dx) + parseFloat(data.jj));
}
</script>
以上這篇vue 修改 data 數(shù)據(jù)問(wèn)題并實(shí)時(shí)顯示的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Mockjs是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截Ajax請(qǐng)求的庫(kù),可以與Vue和Axios結(jié)合使用,提高前端開(kāi)發(fā)效率,通過(guò)在項(xiàng)目中引入Mock.js文件,可以模擬后端API,攔截Ajax請(qǐng)求并返回自定義響應(yīng),這種方法適用于在后端尚未開(kāi)發(fā)完成時(shí)的前端開(kāi)發(fā)測(cè)試2024-10-10
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動(dòng)態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開(kāi)
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開(kāi)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue3如何解決Element-plus不生效的問(wèn)題
這篇文章主要介紹了Vue3如何解決Element-plus不生效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Computed 計(jì)算屬性是 Vue 中常用的一個(gè)功能，本篇文章主要介紹了Vue Computed 計(jì)算屬性原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue實(shí)現(xiàn)圖片預(yù)覽功能的詳細(xì)指南
在現(xiàn)代 web 應(yīng)用程序中,圖片預(yù)覽功能提升了用戶(hù)體驗(yàn),使用戶(hù)可以在上傳圖片之前查看圖片內(nèi)容,本文將詳細(xì)介紹如何在 Vue.js 應(yīng)用中實(shí)現(xiàn)圖片預(yù)覽功能,包括基本實(shí)現(xiàn)、進(jìn)階功能、與 Element UI 的集成、常見(jiàn)優(yōu)化技巧以及與其他庫(kù)的結(jié)合使用,需要的朋友可以參考下2024-09-09
vite build vue3項(xiàng)目配置開(kāi)啟sourcemap方式
這篇文章主要介紹了vite build vue3項(xiàng)目配置開(kāi)啟sourcemap方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08