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

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

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

1.v-model在input的下拉框、單選按鈕、復(fù)選框中的應(yīng)用

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

    這里有一個(gè)值綁定的問(wèn)題，不管是下拉框或者單選按鈕還是復(fù)選框，我們都可以在對(duì)應(yīng)的標(biāo)簽內(nèi)設(shè)置value。以下拉框?yàn)槔?，我們?cè)?lt;option>中添加了vulue=“A被選”，當(dāng)我們選擇第一個(gè)下拉框A的時(shí)候，在selected中的字符串為‘A被選'，如果我們不在<option>中設(shè)置value值的話那么selected中的字符串將是<option>中的值‘A'。

    這里還有一個(gè)和vue無(wú)關(guān)的問(wèn)題，比較簡(jiǎn)單，但是由于平時(shí)主要做后臺(tái)java開(kāi)發(fā)沒(méi)太注意這個(gè)前端問(wèn)題。以下面的單選按鈕代碼為例，<label>標(biāo)簽內(nèi)有一個(gè)for元素與input中的id值對(duì)應(yīng)(兩個(gè)值相同)，剛開(kāi)始不太理解為什么這么寫(xiě)，這個(gè)對(duì)前端人員來(lái)說(shuō)應(yīng)該是一個(gè)很簡(jiǎn)單的問(wèn)題。這樣寫(xiě)的目的沒(méi)有其它任何作用，只是label元素為鼠標(biāo)改進(jìn)了可用性，在點(diǎn)擊label的時(shí)候也相當(dāng)于點(diǎn)擊了對(duì)應(yīng)的input控件，點(diǎn)擊label標(biāo)簽也可以觸發(fā)input標(biāo)簽控件。例如單選按鈕在加了for之后點(diǎn)擊small也可以選擇對(duì)應(yīng)按鈕，但是如果不加for是沒(méi)有任何反應(yīng)的。

<!--下拉框-->
<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>

<!--復(fù)選框-->
<div id="app">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
  <label for="one">選項(xiàng)一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
  <label for="two">選項(xiàng)二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
  <label for="three">選項(xiàng)三</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ù)進(jìn)行同步，添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步 -->
  <input v-model.lazy="msg" >
  <!--去除字符串首尾的空格-->
  <input v-model.trim="msg">
  <!--將數(shù)據(jù)轉(zhuǎn)化為值類型-->
  <input v-model.number="age" type="number">

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

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

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

  1. v-bind綁定一個(gè)value屬性

  2. v-on指令給當(dāng)前元素綁定input事件

自定義組件使用v-model，應(yīng)該有以下操作：

1. 接收一個(gè)value prop

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

在原生表單元素中：

<input v-model="inputValue">

相當(dāng)于

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

在自定義組件中

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

相當(dāng)于

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

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

this.$emit('input', value)

總結(jié)

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

最新評(píng)論