成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Seay / 3538人閱讀

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

1、基礎(chǔ)用法

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

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

單個復(fù)選框，綁定到布爾值：

多個復(fù)選框，綁定到同一個數(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 表達(dá)式的初始值未能匹配任何選項，
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），復(fù)選框(checkbox)及選擇框的選項(option)，v-model 綁定的值通常是靜態(tài)字符串 (對于復(fù)選框checkbox也可以是布爾值)：




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

2.1 復(fù)選框 


// 當(dāng)選中時
vm.toggle === "yes"
// 當(dāng)沒有選中時
vm.toggle === "no"

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

2.2 單選按鈕 

// 當(dāng)選中時
vm.pick === vm.a
####2.3 選擇框的選項####


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

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

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

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

3.3 .trim

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

4、在組件上使用v-model

參見自定義輸入組件

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

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

相關(guān)文章

  • vue.js學(xué)習(xí)筆記

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

    levy9527 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    baoxl 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    liukai90 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

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

    rollback 評論0 收藏0

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

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

    izhuhaodev 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<