国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js的v-model(表單輸入)

Tikitoo / 3036人閱讀

摘要：表單輸入綁定基礎(chǔ)用法我們可以利用指令來(lái)實(shí)現(xiàn)數(shù)據(jù)與模版的雙向綁定它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。會(huì)忽略所有表單元素的特性的初始值。如果要自動(dòng)過(guò)濾用戶輸入的首尾空格，可以添加修飾符到上過(guò)濾輸入

表單輸入綁定 基礎(chǔ)用法

我們可以利用 v-model 指令來(lái)實(shí)現(xiàn)數(shù)據(jù)與模版的雙向綁定,它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖，它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。

v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來(lái)作為具體的值。你應(yīng)該通過(guò) JavaScript 在組件的 data 選項(xiàng)中聲明初始值。
文本 

    
{{msg}}

    

var vm = new Vue({
    el:"#box",
    data:{
        msg:"hi girl"
    }
})

結(jié)果

多行文本 

    
{{msg}}

    

var vm = new Vue({
    el:"#box",
    data:{
        msg:"hi girl"
    }
})

結(jié)果

復(fù)選框 

    

var vm = new Vue({
    el:"#box",
    data:{
        msg:true
    }
})

結(jié)果

單選 

    
    
    

    
    
    

    Picked: {{ picked }}

var vm = new Vue({
    el:"#box",
    data:{
        picked:""
    }
})

結(jié)果

選擇列表 

    
    Selected: {{ selected }}

var vm = new Vue({
    el:"#box",
    data:{
        selected: ""
    }
})

結(jié)果

如果 v-model 表達(dá)初始的值不匹配任何的選項(xiàng)，< select > 元素就會(huì)以”未選中”的狀態(tài)渲染。在 iOS 中，這會(huì)使用戶無(wú)法選擇第一個(gè)選項(xiàng)，因?yàn)檫@樣的情況下，iOS 不會(huì)引發(fā) change 事件。因此，像以上提供 disabled 選項(xiàng)是建議的做法。
多選列表（綁定到一個(gè)數(shù)組）：

    
    

    Selected: {{ selected }}

var vm = new Vue({
    el:"#box",
    data:{
        selected: []
    }
})

結(jié)果

綁定 value

對(duì)于單選按鈕，勾選框及選擇列表選項(xiàng)， v-model 綁定的 value 通常是靜態(tài)字符串（對(duì)于勾選框是邏輯值）：







但是有時(shí)我們想綁定 value 到 Vue 實(shí)例的一個(gè)動(dòng)態(tài)屬性上，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè)屬性的值可以不是字符串。
復(fù)選框 
// 當(dāng)選中時(shí)
vm.toggle === vm.a
// 當(dāng)沒(méi)有選中時(shí)
vm.toggle === vm.b
單選按鈕 
// 當(dāng)選中時(shí)
vm.pick === vm.a
選擇列表設(shè)置 
// 當(dāng)選中時(shí)
typeof vm.selected // => "object"
vm.selected.number // => 123
修飾符

.lazy

.number

.trim

.lazy

在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分)，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
.number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個(gè)修飾符 number 給 v-model 來(lái)處理輸入值：

這通常很有用，因?yàn)樵?type="number" 時(shí) HTML 中輸入的值也總是會(huì)返回字符串類型。
.trim

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/87429.html

相關(guān)文章

  • Vue.js-表單與v-model

    摘要：學(xué)習(xí)筆記表單與表單與提供了指令，用于在表單類元素上雙向綁定數(shù)據(jù)。事實(shí)上，也是一個(gè)特殊的語(yǔ)法糖，只不過(guò)它會(huì)在不同的表單上智能處理。選擇的項(xiàng)復(fù)選框復(fù)選框單獨(dú)使用時(shí)，也是用綁定一個(gè)布爾值。復(fù)選框選擇列表當(dāng)選中時(shí)，是一個(gè)，所以。 學(xué)習(xí)筆記：表單與v-model 表單與v-model Vue.js提供了v-model指令，用于在表單類元素上雙向綁定數(shù)據(jù)。 使用v-model后，表單控件顯示的值...

    jollywing 評(píng)論0 收藏0

  • Vue.js第八課 表單

    摘要：你可以用指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。如果要自動(dòng)過(guò)濾用戶輸入的首尾空格，可以添加修飾符到上過(guò)濾輸入 這節(jié)我們?yōu)榇蠹医榻B Vue.js 表單上的應(yīng)用。 你可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。showImg(https://segmentfault.com/img/bVOfeD?w=700&h=372); v-m...

    weizx 評(píng)論0 收藏0

  • Vue.js組件中v-model的使用

    摘要：在中，經(jīng)常會(huì)使用實(shí)現(xiàn)表單的雙向數(shù)據(jù)綁定功能。使用組件時(shí)，組件庫(kù)中的含有輸出類型的自定義組件，都會(huì)使用指令，該指令綁定的元素就是組件的輸出結(jié)果。 在 Vue.js 中，經(jīng)常會(huì)使用 v-model 實(shí)現(xiàn)表單的雙向數(shù)據(jù)綁定功能。 使用 Element 組件時(shí)，組件庫(kù)中的含有輸出類型的自定義組件，都會(huì)使用v-model指令，該指令綁定的元素就是組件的輸出結(jié)果。比如 select選擇器 show...

    calx 評(píng)論0 收藏0

  • 手把手教你學(xué)Vue-1(vue指令)

    摘要：方法用來(lái)新增對(duì)象的屬性模版指令不是字符串模版渲染，所以需要用來(lái)渲染菜鳥(niǎo)教程屬性中的值應(yīng)使用指令縮寫(xiě)方式。 最近因?yàn)橐貥?gòu)APP項(xiàng)目，在對(duì)比了react和Vue，加上前期已經(jīng)有了react開(kāi)發(fā)的經(jīng)驗(yàn)，還是想嘗試一下VUE，更小更便捷的開(kāi)發(fā)方式。 1.vue 初始化安裝官網(wǎng)提供的NPM方法 $ npm install vue # 全局安裝 vue-cli $ npm install ...

    LucasTwilight 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Tikitoo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<