vue實戰學習教程3 表單輸入繫結

2021-10-17 03:45:17 字數 1702 閱讀 2354

給後台傳值不用乙個個繫結input元素傳送,可以一次性搞定

>

>

form 表單輸入與傳值title

>

head

>

>

"myvue"

>

action

="1.html"

@submit.prevent

="mysubmit"

>

使用者名稱:type

="text"

value="

" v-model

="user.username"

>

>

密碼:type

="password"

value="

" v-model

="user.password"

>

>

性別:type

="radio"

value

="male"

v-model

="user.***"

>

男 type

="radio"

value

="female"

v-model

="user.***"

>

女>

興趣:type

="checkbox"

value

="football"

v-model

="user.hobbies"

>

足球, type

="checkbox"

value

="basketball"

v-model

="user.hobbies"

>

籃球, type

="checkbox"

value

="pingpang"

v-model

="user.hobbies"

>

桌球,

>

城市:name="

" id="

" v-model

="user.city"

>

disabled

value="

">

請選擇option

>

v-for

="c in optionalcities"

:value

="c.id"

>

}option

>

select

>

>

>

type

="submit"

value

="註冊"

>

form

>

div>

src=

"js/vue.js"

>

script

>

>

var vm=

newvue(,

//可選城市的下拉選項

optionalcities:[,

,]},

methods:}}

)script

>

body

>

vue學習 表單

v model 指令在表單控制項元素上建立雙向資料繫結。訊息是 textarea 元素 核取方塊 多個核取方塊 runoob google taobao 選擇的值為 單選按鈕 google 選中值為 select列表 runoob google 選擇的 是 修飾符 lazy 在預設情況下,v mod...

Vue學習教程

vue.js 讀音 vju 類似於 view 是一套構建使用者介面的漸進式框架。vue 只關注檢視層,採用自底向上增量開發的設計。vue 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件。vue 學習起來非常簡單,本教程基於 vue 2.1.8 版本。開始學習 vue.js 安裝...

學習Vue(8) 表單

表單是前端中用到非常多的部分,這裡將用vue實現資料的雙向繫結。可以用 v model 指令在表單控制項元素上建立雙向資料繫結。使用v model進行雙向繫結資料,即一邊的資料發生變化,另一邊的資料也發生變化。密碼 備註 瀏覽器顯示 核取方塊如果是乙個為邏輯值,如果是多個則繫結到同乙個陣列。選中的值...