快捷導(dǎo)航

Vue中watch和methods兩種屬性的作用

更新時(shí)間：2023年02月02日 16:23:04 作者：ldcaws

這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1、普通數(shù)據(jù)類(lèi)型實(shí)例

		<input type="text" v-model="userName"/> 
		//監(jiān)聽(tīng)當(dāng)userName值發(fā)生變化時(shí)觸發(fā)
		watch: {
			userName (newName, oldName) {
				console.log(newName)
			}
		}
		//或
		watch: {
			userName: {
				handler (newName, oldName) {
					console.log(newName)
				},
				immediate: true
			}
		}

注意：當(dāng)值第一次綁定的時(shí)候不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有當(dāng)值改變的時(shí)候才會(huì)執(zhí)行。如果我們想在第一次綁定的時(shí)候執(zhí)行此監(jiān)聽(tīng)函數(shù)，則需要設(shè)置immediate為true。

2、對(duì)象類(lèi)型實(shí)例

		<input type="text" v-model="cityName.name" />
		data (){
			return {
				cityName: {name:'北京'}
			}
		},
		watch: {
			cityName: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			}
		}

注意：當(dāng)需要監(jiān)聽(tīng)對(duì)象的改變時(shí)，此時(shí)就需要設(shè)置deep為true。

vue中methods是方法屬性，在里面定義方法，語(yǔ)法如下：

methods:{
//在此處定義方法
方法名1() {
},
方法名2() {
}
}

實(shí)例

<button class="btn btn-primary" @click="doAdd">添加</button>
methods : {
         //這里面定義了一個(gè)doAdd的方法.
         doAdd() {
               console.log(“hello”);
               //通過(guò)axios發(fā)送請(qǐng)求
                axios.get(url).then(response =>{
                    console.log(response.data);
                });
            }
        }
}

到此這篇關(guān)于Vue中watch和methods兩種屬性的作用的文章就介紹到這了,更多相關(guān)Vue watch和methods內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: