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

資訊專欄INFORMATION COLUMN

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

Seay / 3474人閱讀

摘要：復選框當選中時當沒有選中時這里的和特性并不會影響輸入控件的特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。

1、基礎用法

v-model指令可以實現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定。只能運用在表單元素中（input、radio、text、address、email、select、checkbox、textarea）

可以用 v-model 指令在表單 、 1.3 復選框（checkbox）

單個復選框，綁定到布爾值：

多個復選框，綁定到同一個數(shù)組：


  
  
  
  
  
  
  

  Checked names: {{ checkedNames }}



new Vue({
  el: "#example-3",
  data: {
    checkedNames: [ ]
  }
})
1.4 單選按鈕（radio） 

  
  
  

  
  
  

  Picked: {{ picked }}



new Vue({
  el: "#example-4",
  data: {
    picked: " "
  }
})
1.5 選擇框（selected）

單選時


  
  Selected: {{ selected }}



new Vue({
  el: "#example-5",
  data: {
    selected:  "  "
  }
})

如果 v-model 表達式的初始值未能匹配任何選項，
Selected: {{ selected }}

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

用 v-for 渲染的動態(tài)選項：


Selected: {{ selected }}

new Vue({
  el: "...",
  data: {
    selected: "A",
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" }
    ]
  }
})
2、值綁定

對于單選按鈕（radio），復選框(checkbox)及選擇框的選項(option)，v-model 綁定的值通常是靜態(tài)字符串 (對于復選框checkbox也可以是布爾值)：




但是有時我們可能想把值綁定到 Vue 實例的一個動態(tài)屬性上，這時可以用 v-bind 實現(xiàn)，并且這個屬性的值可以不是字符串。

2.1 復選框 


// 當選中時
vm.toggle === "yes"
// 當沒有選中時
vm.toggle === "no"

這里的 true-value 和 false-value 特性并不會影響輸入控件的 value 特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。

2.2 單選按鈕 

// 當選中時
vm.pick === vm.a
####2.3 選擇框的選項####


// 當選中時
typeof vm.selected // => "object"
vm.selected.number // => 123
3、修飾符 3.1 .lazy

在默認情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進行同步：
3.2 .number

如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符：

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

3.3 .trim

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

4、在組件上使用v-model

參見自定義輸入組件

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

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

相關文章

  • vue.js學習筆記

    摘要：指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于。對象形式佐客湯姆咪口修飾符修飾符是以半角句號指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。 指令 指令(Directives)是帶有v-前綴的特殊屬性。指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應式地作用于DOM。 v-if條件判斷 T...

    levy9527 評論0 收藏0

  • Vue學習筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構建用戶界面的框架 是一...

    baoxl 評論0 收藏0

  • Vue學習筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構建用戶界面的框架 是一...

    liukai90 評論0 收藏0

  • Vue學習筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構建用戶界面的框架 是一...

    rollback 評論0 收藏0

  • 前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

    摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評論0 收藏0

發(fā)表評論

0條評論

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