成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue 表單輸入綁定

mtunique / 1726人閱讀

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

表單輸入綁定 基礎(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:"",
    },
多選列表（綁定到一個數(shù)組）： 

  
  

  Selected: {{ selected }}

  
new Vue({
  el: "#example-6",
  data: {
    selected: []
  }
})
綁定 value 
對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態(tài)字符串（對于勾選框是邏輯值）：
復(fù)選框 
  

// 當(dāng)選中時
vm.toggle === vm.a
// 當(dāng)沒有選中時
vm.toggle === vm.b
單選按鈕
單選按鈕 
  

// 當(dāng)選中時
vm.pick === vm.a
選擇列表設(shè)置 
  

// 當(dāng)選中時
typeof vm.selected // => "object"
vm.selected.number // => 123
修飾符 .lazy 
在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
 {{msg}}
.number 
如果想自動將用戶的輸入值轉(zhuǎn)為 Number 類型,可以添加一個修飾符 number 給 v-model 來處理輸入值：
{{num1}}
 
{{num2}}
 

{{num1+num2}}   

var vm=new Vue({
    date:{
        num1:1,
        num2:1
    },
});
.trim 
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
 {{msg}}

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88360.html

相關(guān)文章

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

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

    Seay 評論0 收藏0

  • 使用vue自定義指令開發(fā)一個表單驗證插件validate.js

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

    warnerwu 評論0 收藏0

  • 手把手教你用Vue.js封裝Form組件

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

    gitmilk 評論0 收藏0

  • Vue的表單輸入綁定

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

    Snailclimb 評論0 收藏0

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

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

    Tikitoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<