а√天堂资源中文在线官网,亚洲精品成人网久久久久久,69日本人xxxx护士hd

基礎用法

單行文本輸入框

多行文本域

復選框

單選按鈕

選擇框

v-model的修飾符

總結

首頁

web前端

Vue.js

實例詳解Vue中v-model指令的用法

青燈夜游

Aug 10, 2022 pm 05:38 PM

vue v-model 數(shù)據(jù)雙向綁定

實例詳解Vue中v-model指令的用法

通過前面的學習，我們可以順利的在Vue中將數(shù)據(jù)源渲染到HTML的DOM元素中，但很多時候我們希望能控制數(shù)據(jù)源。也就是數(shù)據(jù)綁定，并且與其通訊。簡單的說，怎么在Vue中實現(xiàn)數(shù)據(jù)的雙向綁定。這種場景一般都是在表單的操作情景中。在Vue中可以使用v-model的指令來實現(xiàn)。不過這篇文章我們只是來學習v-model指令的使用，但不探究Vue數(shù)據(jù)雙向綁定的原理。如果你對原理方面感興趣，可以閱讀這篇文章。

基礎用法

在Vue中，通過{{}}或v-text的方式，可以將數(shù)據(jù)源中的數(shù)據(jù)渲染到DOM元素中。（學習視頻分享：vue視頻教程）

比如：

<!-- Template -->
<h1>{{ message }}</h1>

let app = new Vue({
    el: &#39;#app&#39;,
    data: {
        message: &#39;Hello W3cplus! (^_^)&#39;
    }
})

v-model

基于上面的示例，咱們修改一下需求，我們想通過一個<input>的輸入來修改{{message}}。這個時候我們就需要使用到v-model。先來看示例，再聊v-model。在上面示例的基礎上添加一個input，修改后的模板代碼如下：

<!-- Template -->
<div id="app">
    <div>
        <input type="text" v-model="message" placeholder="Hello W3cplus!(^_^)" />
    </div>
    <h1>{{ message }}</h1>
</div>

v-model

從效果中可以看出，修改input的value值，對應的h1元素的內容也修改了。這種效果就是數(shù)據(jù)雙向綁定的效果。

而這里關鍵點就是使用了v-model指令。在Vue中，可以使用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控制類型自動選取正確的方法來更新元素。盡管有些神奇，但v-model本質上不過是語法糖，它負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。

注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值。因為它會選擇Vue實例數(shù)據(jù)來作為具體的值。你應該通過JavaScript在組件的data選項中聲明初始值。

在Vue中，v-model主要是用于表單控件上。那么接下來，咱們來看看v-model在常見的表單控件上是怎么使用的。

單行文本輸入框

前面演示的示例其實就是單行文本輸入框的效果。input上通過v-model綁定Vue的數(shù)據(jù)源的值。當input輸入值一旦發(fā)生變更時，數(shù)據(jù)也會相應發(fā)生變化，從而元素渲染的插值也會做出相應變化。

這里的data可以是object或者function，但組件的data只能是function，這是因為組件內各自擁有自己的data，而非共用的關系。不過今天我們不看組件中的數(shù)據(jù)雙向綁定，只是簡單的看表單控件方面的。不跑題了，回到input框中來。我們一般在模板中像下面這樣寫代碼：

<!-- Template -->
<div id="app">
    <div>
        <input type="text" v-model="message" placeholder="Hello W3cplus!(^_^)" />
    </div>
    <h1>{{ message }}</h1>
</div>

同樣的，在Vue實例中，需要指定data，我們這個示例是指message：

let app = new Vue({
    el: &#39;#app&#39;,
    data: {
        message: &#39;Hello W3cplus! (^_^)&#39;
    }
})

刷新你的瀏覽器，當你修改input的輸入值時，對應的可以看到h1元素內容的同步變化，效果如下圖所示：

v-model

多行文本域

多行文本域textarea和input非常的類似。比如把上面示例中的input換面textarea表單元素，同樣的將v-model="message"綁定在textarea元素上。模板代碼像下面這樣：

<!-- Template -->
<div id="app">
    <div>
        <textarea v-model="message" cols="30" rows="5"></textarea>
    </div>
    <h2>{{ message }}</h2>
</div>

咱們在textarea中修改內容，對應的h2也會有變化：

v-model

小結一下：當使用文本input(包括email，number等)或textarea時，v-model="varName"等價于:value="varName" @input="e => varName = e.target.value"。這意味著每次輸入完成后的varName將被更新為輸入的值，然后輸入的值被設置為varName。正常的select元素也會像這樣，盡管multiple多項選擇有所不同。

在文本區(qū)域插值 (<textarea></textarea>) 并不會生效，應用 v-model 來代替。

復選框

在Vue中的復選框通過v-model綁定數(shù)據(jù)源，并不和我們Web表單中的復選框一樣。比如下面的示例：

<!-- Template -->
<div>
    <input type="checkbox" v-model="checked" id="checkbox" />
    <label for="checkbox">{{checked}}</label>
</div>

// JavaScript
let app = new Vue({
    data: {
        checked: false
    }
})

刷新瀏覽器，當復選框選中的時候，checked的值false就變成了true。如下圖所示：

v-model

不知道你跟我是不是同樣的好奇，如果input復選框設置了checked（默認選中），會不會刷新瀏覽器，checked的值會不會變成true。從實戰(zhàn)來看，是不會有變化的，只有選中之后，false才會變成true。另外再試一個效果，如果checked默認值不是false，是任何字符串，看看是什么效果？

v-model

是不是很神奇，雖然默認選中，并且點擊之后就在false和true之間切換。

上面的示例，咱們只使用單個復選框，從效果上告訴我們v-model會將其視為布爾值，并且會忽略該value。而且：

<input type="checkbox" value="foo" v-model="isChecked" />

將和下面的代碼相同：

<input type="checkbox" value="foo" :checked="!!isChecked" @change="e => isChecked = e.target.checked" />

如果想要它是非布爾值，可以使用true-value和false-value屬性，它控制當選擇復選框時，模型將被設置成什么值。

<input type="checkbox" value="foo" v-model="isChecked" true-value="1" false-value="0">

與以下代碼相同

<input type="checkbox" value="foo" :checked="isChecked ==&#39;1&#39;" @change="e => isChecked = e.target.checked？&#39;1&#39;:&#39;0&#39;">

單一復選框的情況差不多就是這樣。如果有多個復選框共享一個數(shù)據(jù)源（v-model指定的值），那么這些復選框將填充一個數(shù)組，其值為所有勾選的復選框，但一定要在數(shù)據(jù)源中指定數(shù)據(jù)是一個數(shù)組類型，否則會產生一些奇怪的現(xiàn)象。來看一個多選項的示例：

<!-- Template -->
<div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
</div>
<div>選中的值：{{checkedNames}}</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,

    data: {
        checkedNames: []
    }
})

效果如下：

v-model

當我們使用多個復選框時，true-value和false-value屬性不再有效。同時在模板中像上面示例使用方式，很難保證一致性，所以最好的方式是將一些邏輯移到組件的方法上。不過我們這節(jié)并不介紹怎么應用到組件中，因為我們還沒有學習Vue的組件怎么創(chuàng)建。如果你感興趣的話，可以觀注后續(xù)更新的內容，我們將會花一節(jié)內容來看看怎么完成自定義的復選框組件。

單選按鈕

v-model在單選按鈕上的使用，咱們先來上實例代碼吧：

<!-- Template -->
<div id="app">
    <div>
        <input type="radio" v-model="selected" value="CSS" id="css"/>
        <label for="css">CSS</label>
        <input type="radio" v-model="selected" value="HTML" id="html"/>
        <label for="html">HTML</label>
        <input type="radio" v-model="selected" value="JavaScript" id="javascript"/>
        <label for="javascript">JavaScript</label>
        <br>
        <div>你最喜歡的是：{{selected}}</div>
    </div>
</div>
 
// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
 
    data: {
        selected: null
    }
})

更新瀏覽器，看到的效果如下：

v-model

選擇框

v-model在選擇框上的使用，可以運用在單項選擇框和多項選擇框，不同的是，多項選擇框在數(shù)據(jù)源中應該是一個數(shù)組。比如下面的示例：

<!-- Template -->
<div id="app">
    <h1>選擇框</h1>
    <div>
        <select v-model="selected">
            <option disabled value="">請選擇</option>
            <option>CSS</option>
            <option>HTML</option>
            <option>JavaScript</option>
        </select>
        <span>請選擇: {{ selected }}</span>
    </div>
    <div>
        <select v-model="multipleSelected" multiple>
            <option>CSS</option>
            <option>HTML</option>
            <option>JavaScript</option>
            <option>PHP</option>
        </select>
        <span>請選擇:{{multipleSelected}}</span>
    </div>
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,

    data: {
        selected: null,
        multipleSelected: []
    }
})

效果如下：

v-model

如果 v-model 表達初始的值不匹配任何的選項，<select> 元素就會以”未選中”的狀態(tài)渲染。在 iOS 中，這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS 不會引發(fā) change 事件。因此，像以上提供 disabled 選項是建議的做法。

對于選擇框，如果是動態(tài)選擇框的話，我們可以利用前面學習的v-for指令來幫助我們：

<!-- Template -->
<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <div>你選擇了: {{ selected }}</div>
</div>
// JavaScript
let app = new Vue({
    el: &#39;#pp&#39;,
    data: {
        selected: &#39;請選擇&#39;,
        options: [
            { text: &#39;One&#39;, value: &#39;CSS&#39; },
            { text: &#39;Two&#39;, value: &#39;HTML&#39; },
            { text: &#39;Three&#39;, value: &#39;JavaScript&#39; }
        ]
    }
})

效果是什么樣呢？自己動手寫一下。這里我們用到了Vue的一個新指令，那就是v-bind指令，他有什么功能或特性呢？咱們后續(xù)會學習。

上面向大家展示了v-model指令在常見的表單控件上的使用情況。建議大家自己動手擼一下代碼，體會將會更深。

`v-model`的修飾符

v-model還有一些修飾符的功能，主要有.lazy、number和.trim。其主要功能是：

.lazy：默認情況下，v-model在input事件中同步輸入框的值與數(shù)據(jù)，但添加了.lazy修飾符之后，從而轉變?yōu)樵?code>change事件中同步。簡單點說就是延遲了
.number：如果想自動將用戶的輸入值轉換為Number類型（如果原值的轉換結果為NaN則返回原值），可以添加.number修飾符給v-model來處理輸入值
.trim：如果要自動過濾用戶輸入的首尾空格，可以添加.trim修飾符給v-model上過濾輸入

路們來看一個示例：

<!-- Template -->
<div id="app">
    <ul>
        <li>
            <label>不帶任何修飾符：</label>
            <input type="text" v-model="message" placeholder="Hello W3cplus!(^_^)" />
            <span>{{message}}</span>
        </li>
        <li>
            <label>帶.lazy修飾符：</label>
            <input type="text" v-model.lazy="message" placeholder="Hello W3cplus!(^_^)" />
            <span>{{message}}</span>
        </li>
        <li>
            <label>帶.number修飾符：</label>
            <input type="text" v-model.number="message" placeholder="Hello W3cplus!(^_^)" />
            <span>{{message}}</span>
        </li>
        <li>
            <label>帶.trim修飾符：</label>
            <input type="text" v-model.trim="message" placeholder="Hello W3cplus!(^_^)" />
            <span>{{message}}</span>
        </li>
    </ul>
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,

    data: {
            message: &#39;Hello W3cplus!(^_^)&#39;,
    }
})

刷新頁面看效果：

v-model

從上在的效果可以看出：

不帶修飾符：修改input的值，message立馬變同步input的輸入值
帶.lazy修飾符：修改input的值，message并不會立馬同步input的輸入值，只有當input失去焦點時，message才會同步input的輸入值
帶.number修飾符：當輸入框的值，以數(shù)字加其他字符組合的內容，會自動去除其他的字符，只留數(shù)字；如果是其他字符加數(shù)字組合的內容，并不會刪除其他字符，只留數(shù)字。一般帶.number修飾符的input控制配合type="number"配合使用
帶.trim修飾符：?input輸入框開始或末尾有空字符，將會自動刪除空字符，如果空字符在其他字符中間，則不會刪除空字符

總結

這篇文章主要學習了Vue中的v-model的簡單功能，就是和表單控件實現(xiàn)雙向數(shù)據(jù)綁定。其實很多時候HTML內建的input類型有時不能滿足我們的需求。這個時候有需要通過Vue的組件系統(tǒng)來創(chuàng)建自定義行為而且可復用的input類型。這些input類型甚至可以和v-model一起使用。這就涉及到了Vue的組件。那么v-model怎么和組件一起使用呢？我們后續(xù)將會學習這部分，因為學習這部分內容，需要對組件有一定的了解。