Vue 表單輸入綁定

mtunique 發布于2019-08-21 16:17 / 1722人閱讀

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

表單輸入綁定 基礎用法 文本

### 多行文本

### 復選框

 愛好



{{ 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:"",
    },

多選列表（綁定到一個數組）：


  
  

  Selected: {{ selected }}

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

綁定 value

對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態字符串（對于勾選框是邏輯值）：

復選框

  

// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b
單選按鈕

單選按鈕

  

// 當選中時
vm.pick === vm.a

選擇列表設置

  

// 當選中時
typeof vm.selected // => "object"
vm.selected.number // => 123

修飾符 .lazy

在默認情況下， v-model 在 input 事件中同步輸入框的值與數據 (除了上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：

 {{msg}}

.number

如果想自動將用戶的輸入值轉為 Number 類型,可以添加一個修飾符 number 給 v-model 來處理輸入值：

{{num1}}
 
{{num2}}
 

{{num1+num2}}   

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

.trim

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

 {{msg}}

GPU云服務器云服務器 vue表單控件 vue綁定 vue綁定內聯樣式 django vue 數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88360.html

vue2.0學習筆記（表單輸入綁定）

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

Seay 2019-08-23 18:35 評論0 收藏0
使用vue自定義指令開發一個表單驗證插件validate.js

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

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

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

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

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

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

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

Tikitoo 2019-08-21 12:05 評論0 收藏0