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

資訊專欄INFORMATION COLUMN

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

Seay / 3466人閱讀

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

1、基礎用法

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

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

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

多個復選框，綁定到同一個數組：


  
  
  
  
  
  
  

  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 渲染的動態選項：


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 綁定的值通常是靜態字符串 (對于復選框checkbox也可以是布爾值)：




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

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 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：
3.2 .number

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

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

3.3 .trim

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

4、在組件上使用v-model

參見自定義輸入組件

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

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

相關文章

  • vue.js學習筆記

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

    levy9527 評論0 收藏0

  • Vue學習筆記（一）

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

    baoxl 評論0 收藏0

  • Vue學習筆記（一）

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

    liukai90 評論0 收藏0

  • Vue學習筆記（一）

    摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。 一、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

發表評論

0條評論

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