// 文字框 輸入的內容繫結到 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...