Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解
更新時(shí)間：2018年08月30日 14:24:45 作者：xdhc304
今天小編就為大家分享一篇Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<template>
<section>
<el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :before-close="cancel">
<el-form :model="form" :rules="rules" ref="form">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="medium" type="primary" @click="addSubmit" :loading="addLoading" :disabled="unChange">確 定</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
export default {
props: ["dialogFormVisible","form","formTitle"],
data() {
return {
unChange: true,
preForm: JSON.parse(JSON.stringify(this.form)) //深拷貝對(duì)象
};
},
watch: {
form:{
handler:function(nowVal,oldVal){
var $this = this;
for(let i in $this.form){
if(nowVal[i] != $this.preForm[i]) {
$this.unChange = false;
break;
}else {
$this.unChange = true;
}
}
},
deep:true
}
},
methods: {
addSubmit() {
var $this = this;
}
},
mounted() {
var $this = this;
}
};
</script>
以上這篇Vue2實(shí)時(shí)監(jiān)聽(tīng)表單變化的示例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue報(bào)錯(cuò)Module build failed: Error: Node&nb
這篇文章主要介紹了Vue報(bào)錯(cuò)Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解決方案,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中使用h5 Plus的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
如何在Vue3中實(shí)現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊(cè)自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)自定義指令的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue 打包體積優(yōu)化方案小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國(guó)地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級(jí)聯(lián)動(dòng)，地區(qū)數(shù)據(jù)的添加和刪除,本文重點(diǎn)給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了vue事件處理原理及過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
uniapp仿微信聊天界面效果實(shí)例(vue3組合式版本)
這篇文章主要介紹了uniapp仿微信聊天界面的相關(guān)資料,這里提及了一個(gè)時(shí)間工具包timeMethod.js,該工具包可能提供了一系列時(shí)間處理的功能,如格式化日期、計(jì)算時(shí)間差等,以便在消息格式中正確展示時(shí)間信息,使用此類工具包可以大大提高開(kāi)發(fā)效率,需要的朋友可以參考下2024-10-10
Vue?axios庫(kù)發(fā)送請(qǐng)求的示例介紹
axios是基于promise的HTTP庫(kù)，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
vue3+vite3+typescript實(shí)現(xiàn)驗(yàn)證碼功能及表單驗(yàn)證效果
這篇文章主要介紹了vue3+vite3+typescript實(shí)現(xiàn)驗(yàn)證碼功能及表單驗(yàn)證效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了使用Nuxt.js改造已有項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08