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

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

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

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

		<input type="text" v-model="userName"/> 
		//監(jiān)聽當(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í)候不會執(zhí)行監(jiān)聽函數(shù)，只有當(dāng)值改變的時(shí)候才會執(zhí)行。如果我們想在第一次綁定的時(shí)候執(zhí)行此監(jiān)聽函數(shù)，則需要設(shè)置immediate為true。

2、對象類型實(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)聽對象的改變時(shí)，此時(shí)就需要設(shè)置deep為true。

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

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

實(shí)例

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

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

您可能感興趣的文章:

相關(guān)文章

vue中echarts3.0自適應(yīng)的方法
這篇文章主要介紹了vue中echarts3.0自適應(yīng)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
Vue中的常用指令及用法總結(jié)
在本篇文章里小編給大家整理的是一篇關(guān)于Vue中的常用指令及用法總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。
2022-01-01
element-ui 文件上傳修改文件名的方法示例
這篇文章主要介紹了element-ui 文件上傳修改文件名的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue-cli單頁面預(yù)渲染seo-prerender-spa-plugin操作
這篇文章主要介紹了vue-cli單頁面預(yù)渲染seo-prerender-spa-plugin操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3中v-if和v-for優(yōu)先級實(shí)例詳解
Vue.js中使用最多的兩個指令就是v-if和v-for,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-if和v-for優(yōu)先級的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果
這篇文章主要介紹了vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
vue3+ts深入組件Props實(shí)例詳解
Props是組件之間進(jìn)行數(shù)據(jù)傳遞的一種方式，可以將數(shù)據(jù)從父組件傳遞給子組件，這篇文章主要介紹了vue3+ts深入組件Props的實(shí)例詳解,需要的朋友可以參考下
2023-09-09
前端Vue2、Vue3和不同版本nuxt的插槽使用詳解
這篇文章主要介紹了前端Vue2、Vue3和不同版本nuxt的插槽使用的相關(guān)資料,Vue2和Vue3中,插槽機(jī)制允許在組件模板中定義占位符,并在使用組件時(shí)插入自定義內(nèi)容,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
淺析vue-router原理
這篇文章主要圍繞Vue的SPA單頁面設(shè)計(jì)展開。SPA(single page application):單一頁面應(yīng)用程序，有且只有一個完整的頁面，對vue router原理感興趣的朋友跟隨小編一起看看吧
2018-10-10
vue插件tab選項(xiàng)卡使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了vue插件tab選項(xiàng)卡的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10