Vue 表單元素繫結

2021-10-06 02:10:53 字數 1597 閱讀 4950

// 文字框  輸入的內容繫結到 name

"text" v-model=

"name"

/>

// 下拉框 - 資料從data的 tt 中讀取 選擇的結果繫結到 select_value

"select_value"

>

"0">請選擇<

/option>

for=

"(v,k) in tt" v-bind:key=

"k":value=

"v.value"

>

}<

/option>

<

/select>

// 核取方塊 - 資料從data的hobby中讀取 選擇的結果繫結到 hobby_check

for=

"(v,k) in hobby"

>

"checkbox"

:checked=

"hobby_check" name=

"hobby"

:value=

"v.hobby_name" v-model=

"hobby_check"

/>}-

}<

/div>

<

/template>

//單選按鈕

for=

"(v,k) in ***"

>

"radio" name=

"***"

:value=

"v.value" v-model=

"***_check"

/>}-

}<

/div>

<

/template>

"submitform()" type=

"button" value=

"提交"

/>

export

default,]

, hobby_check:

['study'],

select_value:0,

tt:[,

],***:[,

],***_check:2}

},methods:}}

<

/script>

其中 hobby 、 tt 、*** 為 定義的資料,

選中之後 繫結的model分別是

select_value

hobby_check

***_check

在提交資料的時候,可以直接通過下邊的**獲取到選中的內容和對應的值。

console.

log(

this

.name)

console.

log(

this

.select_value)

console.

log(

this

.hobby_check)

console.

log(

this

.***_check)

VUE 表單元素雙向繫結總結

以下語法基於vue1.0 checkbox最基本用法 new vue ready function 規則1 如果v model繫結的變數型別為boolean,若input被選中,this.inputdata為true,否則this.inputdata為false。如上圖 inputdata變數初始設...

vue 表單 繫結

vue的表單 使用v model 來繫結資料,具有雙向繫結資料的效果 雙向繫結,及不僅可以通過js運算元據顯示,並且可以通過input 等輸入框改變data checkbox 的資料繫結 通過data 的ture or false 來確定是否是選定項 選項2選項3 選項4選項5 測試得到,check...

vue 實現input表單元素的disabled

今天產品經理提了乙個需求 乙個api的賬號體系增加乙個checkbox控制api輸出字段,但是有三個是偽控制,事實上是介面裡面寫死的,所以是必須選中的 class checkbox class checkbox inline v for show field in form params.expor...