在Vue中，有一個(gè)經(jīng)常用到的指令 - v-model。它可以雙向綁定數(shù)據(jù)和表單元素的值，簡化了編寫代碼的過程。在表單元素中，例如input，select 和 textarea等等，v-model的作用是根據(jù)用戶的輸入自動(dòng)同步數(shù)據(jù)和表單元素的值。
// 示例1{{ message }}
// 示例2{{ selected }}
以上兩個(gè)示例中，我們可以看到v-model綁定了數(shù)據(jù)message和selected。當(dāng)用戶在輸入框中輸入文字時(shí)，message的值也會(huì)隨之改變。當(dāng)用戶在下拉框中選擇不同的選項(xiàng)時(shí)，selected的值也會(huì)隨之改變。
除了在表單元素中使用v-model外，我們也可以將它用在組件中。在組件中，v-model指令可以把一個(gè)自定義組件中的值綁定到父組件中的數(shù)據(jù)。這種方式也被稱為組件的“自定義事件”。
// 子組件示例// 父組件示例
在上述示例中，我們通過props屬性將子組件中的value綁定到父組件中的message。子組件中的@input事件將當(dāng)前輸入框的值返回給父組件，觸發(fā)v-model中的“input”事件，從而達(dá)到使用v-model雙向綁定的效果。
在實(shí)際應(yīng)用中，我們也可以使用v-model指令在父組件中簡化自定義組件的使用，使得自定義組件更加易用、直觀、靈活和高效。
總而言之，v-model指令是Vue中一個(gè)非常實(shí)用的指令。它可以輕松地將表單元素或自定義組件中的值綁定到數(shù)據(jù)，并保持雙向一致。使用v-model指令會(huì)讓編寫代碼的過程更加簡單、高效和直觀。