最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

首頁(yè) 慕課教程 Vue 入門教程 Vue 入門教程 Vue 數(shù)據(jù)雙向綁定
此間少年_ · 更新于 2020-12-07

1. 前言

本小節(jié)我們將介紹 Vue 中數(shù)據(jù)的雙向綁定指令 v-model。v-model 的學(xué)習(xí)相對(duì)簡(jiǎn)單。我們可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。

2. 慕課解釋

用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。v-model 本質(zhì)上不過是語(yǔ)法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理?！?官方定義

v-model 是 vue 提供的用來對(duì)表單控件做數(shù)據(jù)雙向綁定的指令。它可以根據(jù)用戶的輸入動(dòng)態(tài)改變其綁定的值，同樣可以根據(jù)綁定值的改變來操作頁(yè)面 DOM 的更新。

3. 基本用法

接下來我們將詳細(xì)介紹 v-model 在不同表單元素上的使用。

3.1 單行文本 input

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="name" placeholder="請(qǐng)輸入商品名稱"/>
      <p>名稱是: {{ name }}</p>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: ''
      },
    })
   </script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
上述代碼，我們通過 v-model 給輸入框 input 和 name 形成雙向綁定，當(dāng) input 中數(shù)據(jù)發(fā)生改變時(shí) name 也會(huì)發(fā)生改變。同理，我們?cè)诳刂婆_(tái)通過 vm.name = "" 給 name 賦值時(shí)輸入框的內(nèi)容也會(huì)發(fā)生改變。

3.2 多行文本 textarea

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <textarea v-model="desc" placeholder="請(qǐng)輸入商品描述"></textarea>
    <p>描述是: {{ desc }}</p>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	desc: ''
  },
})
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
上述代碼，我們通過 v-model 給輸入框 textarea 和 desc 形成雙向綁定，當(dāng) textarea 中數(shù)據(jù)發(fā)生改變時(shí) desc 也會(huì)發(fā)生改變。同理，我們?cè)诳刂婆_(tái)通過 vm.desc = "" 給 desc 賦值時(shí)輸入框的內(nèi)容也會(huì)發(fā)生改變。

3.3 單個(gè)復(fù)選框

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <input type="checkbox" id="delivery" v-model="isDelivery">
      <label for="delivery">{{ isDelivery }}</label>
      <span>選項(xiàng): {{ isDelivery }}</span>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el: '#app',
  data: {
  	isDelivery: false
  },
})
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
上述代碼，我們通過 v-model 給單個(gè)選擇框 checkbox 和 isDelivery 形成雙向綁定，當(dāng) checkbox 改變選中狀態(tài)時(shí) isDelivery 也會(huì)發(fā)生改變。同理，我們?cè)诳刂婆_(tái)通過 vm.isDelivery = true 給 isDelivery 賦值時(shí) checkbox 的選中狀態(tài)也會(huì)發(fā)生改變。

3.4 多個(gè)復(fù)選框

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <input type="checkbox" id="food" value="食品" v-model="types">
      <label for="food">食品</label>
      <input type="checkbox" id="book" value="圖書" v-model="types">
      <label for="book">圖書</label>
      <input type="checkbox" id="clothes" value="衣服" v-model="types">
      <label for="clothes">衣服</label>
      <br>
      <span>類型: {{ types }}</span>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el: '#app',
  data: {
  	types: []
  },
})
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
上述代碼，我們通過 v-model 給多個(gè)選擇框 checkbox 和 types 形成雙向綁定，當(dāng)任意 checkbox 改變選中狀態(tài)時(shí) types 也會(huì)發(fā)生改變。同理，我們?cè)诳刂婆_(tái)通過 vm.types = [] 給 types 賦值時(shí)對(duì)應(yīng) checkbox 的選中狀態(tài)也會(huì)發(fā)生改變。

3.5 單選按鈕

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <input type="radio" id="yes" value="1" v-model="isFree">
      <label for="one">是</label>
      <input type="radio" id="no" value="0" v-model="isFree">
      <label for="no">否</label>
      <br>
      <span>選擇: {{ isFree }}</span>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el: '#app',
  data: {
  	isFree: ''
  },
})
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
上述代碼，我們通過 v-model 給單選按鈕 radio 和 isFree 形成雙向綁定，當(dāng) radio 改變選中狀態(tài)時(shí) isFree 也會(huì)發(fā)生改變。同理，我們?cè)诳刂婆_(tái)通過 vm.isFree = 0 給 isFree 賦值時(shí) radio 的選中狀態(tài)也會(huì)發(fā)生改變。

3.6 下拉選擇框

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <select v-model="company">
        <option value="">請(qǐng)選擇</option>
        <option>順豐</option>
        <option>中通</option>
        <option>圓通</option>
      </select>
      <span>選項(xiàng): {{ company }}</span>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
	el: '#app',
  data: {
  	company: ''
  },
})
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
上述代碼，我們通過 v-model 給選擇框 select 和 company 形成雙向綁定，當(dāng) select 改變選項(xiàng)時(shí) company 也會(huì)發(fā)生改變。同理，我們?cè)诳刂婆_(tái)通過 vm.company = 0 給 company 賦值時(shí) select 的選中項(xiàng)也會(huì)發(fā)生改變。

4. 值綁定

對(duì)于單選按鈕、復(fù)選框及選擇框的選項(xiàng)，v-model 綁定的值通常是靜態(tài)字符串 （對(duì)于復(fù)選框也可以是布爾值）：

<!-- 當(dāng)選中時(shí)，`picked` 為字符串 "abc" -->
<input type="radio" v-model="picked" value="abc">

<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當(dāng)選中第一個(gè)選項(xiàng)時(shí)，`selected` 為字符串 "001" -->
<select v-model="selected">
  <option value="001">順豐</option>
  <option value="002">圓通</option>
</select>

但是有時(shí)我們可能想把值綁定到 Vue 實(shí)例的一個(gè)動(dòng)態(tài)屬性上，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè)屬性的值可以不是字符串。

4.1 復(fù)選框綁定值

<input type="checkbox" id="delivery" v-model="isDelivery" true-value="yes" false-value="no">

代碼解釋：
上述代碼中，我們通過 true-value 和 false-value 給 復(fù)選框指定來選中和非選中的值，當(dāng)選中時(shí) vm.isDelivery === 'yes'，當(dāng)沒有選中時(shí) vm.isDelivery === 'no'

4.2 單選按鈕綁定值

<input type="radio" v-model="pick" v-bind:value="a">
// 當(dāng)選中時(shí)
vm.pick === vm.a

代碼解釋：
上述代碼中，我們通過 v-bind:value 給 randio 指定選中的值，當(dāng) radio 選中時(shí) vm.pick === vm.a。

4.3 選擇框選項(xiàng)綁定值

<select v-model="selected">
  <option v-bind:value="{ number: 123 }">123</option>
</select>

代碼解釋：
上述代碼中，我們通過 v-bind:value 給 option 指定 value 值，當(dāng) 該 option 選中時(shí) vm.selected 的值為 { number: 123 }。

5. 修飾符

5.1 .lazy

在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 （除了上述輸入法組合文字時(shí)）。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：

<!-- 在“change”時(shí)而非“input”時(shí)更新 -->
<input v-model.lazy="msg" >

5.2 .number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符：

<input v-model.number="age" type="number">

5.3 .trim

如果要自動(dòng)過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

<input v-model.trim="msg">

6. 小結(jié)

本小節(jié)我們介紹了 Vue 數(shù)據(jù)雙向綁定 v-model 的使用，主要包括以下知識(shí)點(diǎn)：

  • 使用 v-model 對(duì) input、textarea、select 等表單項(xiàng)進(jìn)行數(shù)據(jù)綁定；
  • 使用 v-bind:value 給表單項(xiàng)的值進(jìn)行綁定；
  • v-model 修飾符的使用。