vue中v-model的應用及使用詳解

更新時間：2018年06月27日 08:59:15 作者：王子城

v-model用于表單數(shù)據(jù)的雙向綁定，其實它就是一個語法糖。這篇文章主要介紹了vue中v-model的應用,需要的朋友可以參考下

vue中經常使用到<input>和<textarea>這類表單元素，vue對于這些元素的數(shù)據(jù)綁定和我們以前經常用的jQuery有些區(qū)別。vue使用v-model實現(xiàn)這些標簽數(shù)據(jù)的雙向綁定，它會根據(jù)控件類型自動選取正確的方法來更新元素。

v-model本質上是一個語法糖。如下代碼<input v-model="test">本質上是<input :value="test" @input="test = $event.target.value">，其中@input是對<input>輸入事件的一個監(jiān)聽:value="test"是將監(jiān)聽事件中的數(shù)據(jù)放入到input，下面代碼是v-model的一個簡單的例子。在這邊需要強調一點，v-model不僅可以給input賦值還可以獲取input中的數(shù)據(jù)，而且數(shù)據(jù)的獲取是實時的，因為語法糖中是用@input對輸入框進行監(jiān)聽的?？梢栽谌缦耫iv中加入<p>{{ test}}</p>獲取input數(shù)據(jù)，然后去修改input中數(shù)據(jù)會發(fā)現(xiàn)<p></p>中數(shù)據(jù)隨之改變。

<div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value"> --><!--語法糖-->
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '這是一個測試'
    }
  });
</script>

1.v-model在input的下拉框、單選按鈕、復選框中的應用

如下面代碼，分別是v-model在input不同的組件中的應用，但是大體用法相同。注意：像下面代碼中復選框這樣需要接收多條數(shù)據(jù)的情況下，在data里面應該由數(shù)組與其對應二不是字符串。

這里有一個值綁定的問題，不管是下拉框或者單選按鈕還是復選框，我們都可以在對應的標簽內設置value。以下拉框為例，我們在<option>中添加了vulue=“A被選”，當我們選擇第一個下拉框A的時候，在selected中的字符串為‘A被選'，如果我們不在<option>中設置value值的話那么selected中的字符串將是<option>中的值‘A'。

這里還有一個和vue無關的問題，比較簡單，但是由于平時主要做后臺java開發(fā)沒太注意這個前端問題。以下面的單選按鈕代碼為例，<label>標簽內有一個for元素與input中的id值對應(兩個值相同)，剛開始不太理解為什么這么寫，這個對前端人員來說應該是一個很簡單的問題。這樣寫的目的沒有其它任何作用，只是label元素為鼠標改進了可用性，在點擊label的時候也相當于點擊了對應的input控件，點擊label標簽也可以觸發(fā)input標簽控件。例如單選按鈕在加了for之后點擊small也可以選擇對應按鈕，但是如果不加for是沒有任何反應的。

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <option value="A被選">A</option>
    <option value="B被選">B</option>
    <option value="C被選">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>

<!--單選按鈕-->
<div id="app">
  <input type="radio" id="small" value="small_value" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" id="big" value="big_value" v-model="picked">
  <label for="big">big</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>

<!--復選框-->
<div id="app">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
  <label for="one">選項一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
  <label for="two">選項二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
  <label for="three">選項三</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      checkedNames: []
    }
  })
</script>

2.v-model修飾符

v-model也可以和.lazy、.trim和.number這些修飾符一起使用。

  <!-- 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步，添加 lazy 修飾符，從而轉變?yōu)槭褂?change 事件進行同步 -->
  <input v-model.lazy="msg" >
  <!--去除字符串首尾的空格-->
  <input v-model.trim="msg">
  <!--將數(shù)據(jù)轉化為值類型-->
  <input v-model.number="age" type="number">

.trim和.number的用法比較簡單，這里就不做過多解釋。.lazy相當于一個延遲加載的過程。在上面我們講過<input v-model="test">相當于一個語法糖<input :value="test" @input="test = $event.target.value">，而<input v-model.lazy="msg" >則相當將input的實時更新改為一個change事件，v-model.lazy只有當焦點移除input時才會觸發(fā)事件。下圖1位v-model效果，圖2位v-model.lazy效果。

下面在單獨給大家介紹下vue中v-model使用

v-model用于表單數(shù)據(jù)的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：

1. v-bind綁定一個value屬性

2. v-on指令給當前元素綁定input事件

自定義組件使用v-model，應該有以下操作：

1. 接收一個value prop

2. 觸發(fā)input事件，并傳入新值

在原生表單元素中：

<input v-model="inputValue">

相當于

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定義組件中

<my-component v-model="inputValue"></my-component>

相當于

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

這個時候，inputValue接受的值就是input事件的回調函數(shù)的第一個參數(shù)，所以在自定義組件中，要實現(xiàn)數(shù)據(jù)綁定，還需要$emit去觸發(fā)input的事件。

this.$emit('input', value)

總結

以上所述是小編給大家介紹的vue中v-model的應用及使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vite.config.js或者vue.config.js配置方式
這篇文章主要介紹了vite.config.js或者vue.config.js配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vuex簡單入門
本篇文章主要介紹了初步認識理解Vuex，Vuex就是在一個項目中，提供唯一的管理數(shù)據(jù)源的倉庫,有興趣的可以了解一下
2017-04-04
Vue前端如何實現(xiàn)與后端進行數(shù)據(jù)交互
這篇文章主要介紹了Vue前端如何實現(xiàn)與后端進行數(shù)據(jù)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue實現(xiàn)多組關鍵詞對應高亮顯示功能
最近小編遇到這樣的問題，多組關鍵詞，這里實現(xiàn)了關鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關鍵詞匹配改變字體顏色，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2019-07-07
淺談vue限制文本框輸入數(shù)字的正確姿勢
這篇文章主要介紹了vue限制文本框輸入數(shù)字的正確姿勢，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
Vue nextTick延遲回調獲取更新后DOM機制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調獲取更新后DOM機制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大，變大時略微大一點再變正常，取消點贊時愛心無動畫，同時數(shù)字滾動，+1 時向上滾動，-1 時向下滾動
2021-05-05
vue 循環(huán)加載數(shù)據(jù)并獲取第一條記錄的方法
今天小編就為大家分享一篇vue 循環(huán)加載數(shù)據(jù)并獲取第一條記錄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
使用vue引入maptalks地圖及聚合效果的實現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10