欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

可能是全網(wǎng)vue?v-model最詳細(xì)講解教程

 更新時(shí)間：2022年11月24日 15:55:50   作者：zayyo  
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下

v-model是什么

v-model 是Vue框架的一種內(nèi)置的API指令，本質(zhì)是一種語(yǔ)法糖寫法。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。

為什么使用v-model？

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

什么場(chǎng)景下會(huì)使用v-model？

表單提交是開發(fā)中非常常見的功能，也是和用戶交互的重要手段：比如用戶在登錄、注冊(cè)時(shí)需要提交賬號(hào)密碼；比如用戶在檢索、創(chuàng)建、更新信息時(shí)，需要提交一些數(shù)據(jù)； 這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù)，我們通常會(huì)使用v-model指令來(lái)完成

示例：v-model的基本使用

v-model的原理

官方有說(shuō)到，v-model的原理其實(shí)是背后有兩個(gè)操作：

  • v-bind綁定value屬性的值；
  • v-on綁定input事件監(jiān)聽到函數(shù)中，函數(shù)會(huì)獲取最新的值賦值到綁定的屬性中；

那v-model是雙向綁定嗎？

是的你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。—— vue2官方文檔

那 v-model 是單向數(shù)據(jù)流嗎？

是的，雖然官方?jīng)]有明確表示這點(diǎn)，但我們可以捋一捋兩者的關(guān)系。

什么是單項(xiàng)數(shù)據(jù)流？

父組件可以向子組件傳遞數(shù)據(jù),并且改變子組件的值,而子組件不能改變父組件傳遞給它的 prop 屬性，官方推薦的做法是它拋出事件，通知父組件自行改變綁定的值。

v-model 的做法是怎樣的？

v-model 做法完全符合單項(xiàng)數(shù)據(jù)流。甚至于，它給出了一種在命名和事件定義上的規(guī)范。 眾所周知 .sync 修飾符是單向數(shù)據(jù)流的另一個(gè)典型范式。

單向數(shù)據(jù)流：總結(jié)起來(lái)其實(shí)也就8個(gè)字：數(shù)據(jù)向下，事件向上。

那接下來(lái)，我們?cè)賮?lái)看一下v-model是如何綁定一下其他的表單類型：textarea、checkbox、radio、select等屬性的

v-model的綁定

我們來(lái)看一下綁定textarea

  <div class="demo">
    <textarea v-model="article" cols="30" rows="10"> </textarea>
    <h2>article當(dāng)前的值是：{{ article }}</h2>
  </div>
export default {
  name: 'textarea',
  data () {
    return {
      article: "a"
    }
  }
}

效果：

v-model綁定checkbox

我們來(lái)看一下v-model綁定checkbox：?jiǎn)蝹€(gè)勾選框和多個(gè)勾選框

  • 單個(gè)勾選框：v-model即為布爾值。此時(shí)input的value并不影響v-model的值。
  • 多個(gè)復(fù)選框：當(dāng)是多個(gè)復(fù)選框時(shí)，因?yàn)榭梢赃x中多個(gè)，所以對(duì)應(yīng)的data中屬性是一個(gè)數(shù)組。當(dāng)選中某一個(gè)時(shí)，就會(huì)將input的value添加到數(shù)組中。

單選框示例：

export default {
  name: 'checkbox',
  data () {
    return {
      isAgree: "true"
    }
  }
}

效果：

  <!-- 一般對(duì)應(yīng)數(shù)組類型 -->
      <input type="checkbox" v-model="sport" value="籃球" />籃球
      <input type="checkbox" v-model="sport" value="足球" />足球
      <input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球
      <input type="checkbox" v-model="sport" value="兵乓球" />兵乓球
      您的愛好有：{{ sport }}
export default {
  name: 'demo',
  data () {
    return {
      sport: [],
    }
  }
}

效果示例：

v-model綁定radio

v-model綁定radio，用于選擇其中一項(xiàng)；

        <label for="man">
            <input type="radio" value="男" v-model='sex' id="man">男
        </label>
        <label for="girl">
            <input type="radio" value="女" v-model='sex' id="girl">女
        </label> 您選中的是：{{sex}}
export default {
  name: 'demo',
  data () {
    return {
     sex: '',
    }
  }
}

效果示例：

v-model綁定select

和checkbox一樣，select也分單選和多選兩種情況。

  • 單選：只能選中一個(gè)值，v-model綁定的是一個(gè)值。當(dāng)我們選中option中的一個(gè)時(shí)，會(huì)將它對(duì)應(yīng)的value賦值到fruit中；
  • 多選：可以選中多個(gè)值，v-model綁定的是一個(gè)數(shù)組。當(dāng)選中多個(gè)值時(shí)，就會(huì)將選中的option對(duì)應(yīng)的value添加到數(shù)組fruit中；
<select name="abc" v-model="fruits2" multiple>
        <option value="香蕉">香蕉</option>
        <option value="蘋果">蘋果</option>
        <option value="橙子">橙子</option>
        <option value="榴蓮">榴蓮</option>
      </select>
export default {
  name: 'demo',
  data () {
  return {
       fruits2: [],
  }
  }
}

效果示例：

<select name="abc" v-model="fruits2" multiple size="3>
        <option value="香蕉">香蕉</option>
        <option value="蘋果">蘋果</option>
        <option value="橙子">橙子</option>
        <option value="榴蓮">榴蓮</option>
      </select>

效果示例：

v-model的值綁定

目前我們?cè)谇懊娴陌咐写蟛糠值闹刀际窃趖emplate中固定好的：比如gender的兩個(gè)輸入框值male、female；比如hobbies的三個(gè)輸入框值basketball、football、tennis. 在真實(shí)開發(fā)中，我們的數(shù)據(jù)可能是來(lái)自服務(wù)器的，那么我們就可以先將值請(qǐng)求下來(lái)，綁定到data返回的對(duì)象中，再通過(guò)v-bind來(lái)進(jìn)行值的綁定，這個(gè)過(guò)程就是值綁定。這里不再給出具體的做法，因?yàn)檫€是v-bind的使用過(guò)程。

v-model修飾符 - lazy

lazy修飾符是什么作用呢？

默認(rèn)情況下，v-model在進(jìn)行雙向綁定時(shí)，綁定的是input事件，那么會(huì)在每次內(nèi)容輸入后就將最新的值和綁定的屬性進(jìn)行同步；，如果我們?cè)趘-model后跟上lazy修飾符，那么會(huì)將綁定的事件切換為 change 事件，只有在提交時(shí)（比如回車）才會(huì)觸發(fā)

      <!-- 修飾符    lazy/number/trim -->
      <!-- lazy  失去焦點(diǎn)后才改變點(diǎn)擊enter-->
      <!-- 口默認(rèn)情況下, V- model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)的?？谝簿褪钦f(shuō), - -旦有數(shù)據(jù)發(fā)生改變對(duì)應(yīng)的data中的數(shù)據(jù)就會(huì)自動(dòng)發(fā)生 改變?？趌azy修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會(huì)更新:-->
      <input type="text" v-model.lazy="message" />
      <br />
      {{ message }}
export default {
  name: 'demo',
  data () {
    return {
       message: "內(nèi)容",
    }
  }
}

效果示例：

v-model修飾符 - number

我們先來(lái)看一下v-model綁定后的值是什么類型的：message總是string類型，即使在我們?cè)O(shè)置type為number也是string類型；

如果我們希望轉(zhuǎn)換為數(shù)字類型，那么可以使用 .number修飾符：

另外，在我們進(jìn)行邏輯判斷時(shí)，如果是一個(gè)string類型，在可以轉(zhuǎn)化的情況下會(huì)進(jìn)行隱式轉(zhuǎn)換的： 下面的score在進(jìn)行判斷的過(guò)程中會(huì)進(jìn)行隱式轉(zhuǎn)化的

效果示例：

v-model修飾符 - trim

如果要自動(dòng)過(guò)濾用戶輸入的守衛(wèi)空白字符，可以給v-model添加 trim修飾符

效果示例：

碼上掘金代碼片段

全部示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="./vue.min.js"></script>
</head>


<body>
    <div id="app">
        <!-- 表單綁定v-model的雙向綁定 
        當(dāng)我們?cè)谳斎肟蜉斎雰?nèi)容時(shí)，因?yàn)閕nput中的v-model綁定了message ,所以會(huì)實(shí)時(shí)將輸入的內(nèi)容傳遞給message , 
        message發(fā)生改變。內(nèi)容傳遞給message , message發(fā)生改變。message的值插入到DOM中,所以DOM會(huì)發(fā)生響應(yīng)的改變。0所以,通過(guò)v-model實(shí)現(xiàn)了雙向的綁定。-->
        <input type="text" v-model="message"> {{message}}
        <br>
        <!-- v-model和radio的結(jié)合使用 -->
        <label for="man">
            <input type="radio" value="男" v-model='sex' id="man">男
        </label>
        <label for="girl">
            <input type="radio" value="女" v-model='sex' id="girl">女
        </label> 您選中的是：{{sex}}
        <br>
        <!-- 復(fù)選框   一般對(duì)應(yīng)布爾類型-->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="agree">同意
        </label>
        <button :disabled="!agree">下一步</button> 您的選擇：{{agree}}

        <br>
        <!-- 一般對(duì)應(yīng)數(shù)組類型 -->
        <input type="checkbox" v-model="sport" value="籃球">籃球
        <input type="checkbox" v-model="sport" value="足球">足球
        <input type="checkbox" v-model="sport" value="羽毛球球">羽毛球球
        <input type="checkbox" v-model="sport" value="兵乓球">兵乓球 您的愛好有：{{sport}}

        <br>
        <!-- select  單選-->
        <select name="abc" v-model='fruits'>
            <option value="香蕉">香蕉</option>
            <option value="蘋果">蘋果</option>
            <option value="橙子">橙子</option>
            <option value="榴蓮">榴蓮</option>
        </select> 您選中的水果是{{fruits}}

        <br>
        <br>

        <!-- 多選 -->
        <select name="abc" v-model="fruits2" multiple>
            <option value="香蕉">香蕉</option>
            <option value="蘋果">蘋果</option>
            <option value="橙子">橙子</option>
            <option value="榴蓮">榴蓮</option>
        </select>
        <br> 您選中的水果是{{fruits2}}
        <br>
        <!-- 值綁定 -->
        <label v-for="item in origintobbies" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
        </label>
        <br> 您的愛好是{{hobbies}}
        <br>
        <!-- 修飾符    lazy/number/trim -->
        <!-- lazy  失去焦點(diǎn)后才改變點(diǎn)擊enter-->
        <!-- 口默認(rèn)情況下, V- model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)的?？谝簿褪钦f(shuō), - -旦有數(shù)據(jù)發(fā)生改變對(duì)應(yīng)的data中的數(shù)據(jù)就會(huì)自動(dòng)發(fā)生 改變?？趌azy修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會(huì)更新:-->
        <input type="text" v-model.lazy="message">
        <br> {{message}}
        <br>
        <!-- number 轉(zhuǎn)化為數(shù)字類型-->
        <!-- 默認(rèn)情況下,在輸入框中無(wú)論我們輸入的是字母還是數(shù)字,都會(huì)被 當(dāng)做字符串類型進(jìn)行處理?？诘侨绻覀僝希望處理的是數(shù)字類型,那么最好直接將內(nèi)容當(dāng)做數(shù)字處理。o number修飾符可以讓在輸入框中輸入的內(nèi)容自動(dòng)轉(zhuǎn)成數(shù)字類型:-->
        <input type="text" v-model.number="age">
        <br> {{age}}--{{typeof age}}
        <br>
        <!-- trim 去除空格 -->
        <!-- trim修飾符可以過(guò)濾內(nèi)容左右兩邊的空格 -->
        <input type="text " v-model.trim="name">
        <br> {{name}}
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "內(nèi)容",
                sex: '',
                // 當(dāng)要 默認(rèn)選中時(shí)要填入值即可 例：sex='男'
                agree: false,
                sport: [],
                fruits: '',
                fruits2: [],
                hobbies: [],
                origintobbies: ["籃球", "足球", "乒乓球", "羽毛球", "桌球"],
                age: 0,
                name: ''
            },
        })
    </script>
</body>
</html>

總結(jié)

到此這篇關(guān)于vue v-model最詳細(xì)講解的文章就介紹到這了,更多相關(guān)v-model詳細(xì)講解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論