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

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

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

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

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

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

2、對象類型實例

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

注意：當需要監(jiān)聽對象的改變時，此時就需要設置deep為true。

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

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

實例

<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);
                });
            }
        }
}

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

您可能感興趣的文章: