VUE中v model對核取方塊的輸入繫結

2021-08-19 07:56:55 字數 1139 閱讀 7456

v-model指令在表單元素上建立雙向資料繫結。它會根據控制項型別自動選取正確的方法來更新元素。

對於單選按鈕,核取方塊及選擇框的選項,v-model繫結的值通常是靜態字串 (對於核取方塊也可以是布林值)。對於核取方塊有如下方式

1、單個核取方塊,繫結到布林值

}注意:選項data中,要宣告

checked變數,預設值為false,checked:false,頁面操作,勾選上,那麼v-model會自動繫結更新checked變數,更新為true

2、多個核取方塊,可繫結到同乙個陣列(這裡是要顯示選擇的核取方塊的值)

jack

john

mike

checked names: }

注意:data選項中,checkbox的vulue屬性值必須要有,否則勾選乙個,其他的也會勾選上,顯示異常

lazy修飾符

在預設情況下,v-model在每次input事件觸發後將輸入框的值與資料進行同步 (除了

上述輸入法組合文字時)。你可以新增lazy修飾符,從而轉變為使用change事件進行同步:

v-model.lazy="msg" >

number 修飾符
如果想自動將使用者的輸入值轉為數值型別,可以給v-model新增number修飾符:

v-model.number="age"

type="number">

這通常很有用,因為即使在type="number"時,html 輸入元素的值也總會返回字串

trim修飾符

如果要自動過濾使用者輸入的首尾空白字元,可以給v-model新增trim修飾符:

v-model.trim="msg">

vue實現核取方塊checkbox

效果圖 tempdata 核取方塊資料來源 checkboxidstrs 1,3 假設這是你從資料庫裡取出的資料 checkboxidstr 注意這個一定要是陣列的形式,這樣v model繫結ckeckbox才會自動選中created function 2021 1 22 更新 另一種情況 選中是1...

對HTML動態核取方塊賦值

怎樣寫動態核取方塊參考我的部落格 在編輯頁面要求我們對動態核取方塊賦初始值,這個時候需要轉變思路,將動態框的渲染和預設賦值寫在一起,節省了很多麻煩。首先還是在html頁面中留出核取方塊的位置 交通控制方式 在js中渲染 var type result.data.signaltype 獲取比對值 va...

MFC中核取方塊 checkbox

來自 http blog.csdn.net dongzhongshu archive 2010 06 30 5705138.aspx checkbox是一種特殊的按鈕 得到核取方塊狀態的函式 cbutton pbtn cbutton getdlgitem idc check int state pb...