vue 修改 data 數(shù)據(jù)問題并實時顯示的方法
更新時間：2018年08月27日 09:22:44 作者：周一的周小七
今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問題并實時顯示的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先，定義一個變量：
（以下以本人寫的為例）
首先定義一個變量：
然后，給變量賦值：
如果想要修改數(shù)據(jù)，主要代碼如下:
然后界面上要記得綁定數(shù)據(jù)id:
就Ok了。
拓展知識：Vue刷新修改頁面中的數(shù)據(jù)方法
因為Vue對象一旦生成之后,如果只是修改Vue對象中的數(shù)據(jù),在頁面上是不會自動更新的,得用Vue.set()函數(shù)來進行修改,函數(shù)格式為Vue.set(data,'para','value'),其中data為Vue創(chuàng)建時傳輸?shù)膁ata對象名,后面兩個參數(shù)分別是data對象中的變量名稱與值
頁面初始化代碼:
<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對Vue模板中的變量進行修改的代碼:
<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ù)問題并實時顯示的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Mockjs是一個用于生成隨機數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結合使用,提高前端開發(fā)效率,通過在項目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應,這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試2024-10-10
本篇文章主要介紹了基于Vue2x的圖片預覽插件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue如何將base64流數(shù)據(jù)轉成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉成pdf文件并在新頁面打開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue3如何解決Element-plus不生效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Computed 計算屬性是 Vue 中常用的一個功能，本篇文章主要介紹了Vue Computed 計算屬性原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
在現(xiàn)代 web 應用程序中,圖片預覽功能提升了用戶體驗,使用戶可以在上傳圖片之前查看圖片內容,本文將詳細介紹如何在 Vue.js 應用中實現(xiàn)圖片預覽功能,包括基本實現(xiàn)、進階功能、與 Element UI 的集成、常見優(yōu)化技巧以及與其他庫的結合使用,需要的朋友可以參考下2024-09-09
vite build vue3項目配置開啟sourcemap方式
這篇文章主要介紹了vite build vue3項目配置開啟sourcemap方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08