Vue 表單輸入綁定

mtunique 發(fā)布于2019-08-21 16:17 / 1806人閱讀

摘要：表單輸入綁定基礎(chǔ)用法文本多行文本復(fù)選框愛好看電影打游戲音樂單選按鈕性別男男女女選擇列表單選列表戶口請(qǐng)選擇河北山西北京多選列表綁定到一個(gè)數(shù)組綁定對(duì)于單選按鈕，勾選框及選擇列表選項(xiàng)，綁定的通常是靜態(tài)字符串對(duì)于勾選框是邏輯

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

### 多行文本

### 復(fù)選框

 愛好



{{ checked }}  

var vm=new Vue({
           el:"#app",
           date:{
               checked:[]
           },

單選按鈕

  性別 
男
女
{{picked}} 

var vm=new Vue({
    el:"#app",
    date:{
        picked: ""
    },

選擇列表 單選列表

戶口    
 
{{ selected }}   

var vm=new Vue({
    el:"#app",
    date:{
        selected:"",
    },

多選列表（綁定到一個(gè)數(shù)組）：


  
  

  Selected: {{ selected }}

new Vue({
  el: "#example-6",
  data: {
    selected: []
  }
})

綁定 value

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

復(fù)選框

  

// 當(dāng)選中時(shí)
vm.toggle === vm.a
// 當(dāng)沒有選中時(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

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

 {{msg}}

.number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型,可以添加一個(gè)修飾符 number 給 v-model 來處理輸入值：

{{num1}}
 
{{num2}}
 

{{num1+num2}}   

var vm=new Vue({
    date:{
        num1:1,
        num2:1
    },
});

.trim

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

 {{msg}}

GPU云服務(wù)器云服務(wù)器 vue表單控件 vue綁定 vue綁定內(nèi)聯(lián)樣式 django vue 數(shù)據(jù)綁定

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

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

相關(guān)文章

vue2.0學(xué)習(xí)筆記（表單輸入綁定）

摘要：復(fù)選框當(dāng)選中時(shí)當(dāng)沒有選中時(shí)這里的和特性并不會(huì)影響輸入控件的特性，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。 1、基礎(chǔ)用法 v-model指令可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定。只能運(yùn)用在表單元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表單、及元素上...

Seay 2019-08-23 18:35 評(píng)論0 收藏0
使用vue自定義指令開發(fā)一個(gè)表單驗(yàn)證插件validate.js

摘要：今天就來介紹一下如何利用的自定義指令來開發(fā)一個(gè)表單驗(yàn)證插件的過程。按照這種方式就能夠使用自己開發(fā)的這個(gè)表單校驗(yàn)插件。這段時(shí)間在進(jìn)行一個(gè)新項(xiàng)目的前期搭建，新項(xiàng)目框架采用vue-cli3和typescirpt搭建。因?yàn)轫?xiàng)目比較輕量，所以基本沒有使用額外的ui組件，有時(shí)候我們需要的一些基礎(chǔ)組件我就直接自己開發(fā)了。今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個(gè)表單驗(yàn)證插件的過...

warnerwu 2019-05-23 17:26 評(píng)論0 收藏0
手把手教你用Vue.js封裝Form組件

摘要：到此，和組件的代碼如下在組件中設(shè)置了數(shù)組來保存組件中的表單實(shí)例，方便接下來獲取表單實(shí)例來判斷各個(gè)表單的校驗(yàn)情況并在生命周期中就綁定兩個(gè)監(jiān)聽事件和用于添加和移除表單實(shí)例。前言：在日常使用vue開發(fā)WEB項(xiàng)目中，經(jīng)常會(huì)有提交表單的需求。我們可以使用 iview 或者 element 等組件庫來完成相關(guān)需求；但我們往往忽略了其中的實(shí)現(xiàn)邏輯，如果想深入了解其中的實(shí)現(xiàn)細(xì)節(jié)，本文章從0到1，手...

gitmilk 2019-08-23 14:25 評(píng)論0 收藏0
Vue的表單輸入綁定

摘要：表單輸入綁定上一篇的事件處理方法下一篇的組件基礎(chǔ)用法文本多行文本復(fù)選框單個(gè)復(fù)選框多個(gè)復(fù)選框，添加到數(shù)組里今天明天昨天單選按鈕選擇列表單選列表請(qǐng)選擇如果表達(dá)初始的值不匹配任何的選項(xiàng)，元素就會(huì)以未選中的狀態(tài)渲染。表單輸入綁定上一篇：Vue的事件處理方法：https://segmentfault.com/a/11...下一篇：Vue的組件：https://segmentfault.com...

Snailclimb 2019-08-21 12:05 評(píng)論0 收藏0
Vue.js的v-model(表單輸入)

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

Tikitoo 2019-08-21 12:05 評(píng)論0 收藏0