表單操作
基於vue的表單操作
1.input單行文字
2.textarea 多行文字
3.select 下拉多選
4.radio 單選框
5.checkbox 多選框
>
"">
暱稱:"text" v-model=
"nick"
>
<
/div>
性別:"radio" id=
"male" name=
"gender" value=
"1" v-model=
"gender"
>
="male"
>男<
/label>
"radio" id=
"female" name=
"gender" value=
"2" v-model=
"gender"
>
="female"
>女<
/label>
<
/div>
愛好:"checkbox" id=
"football" value=
"1" v-model=
"hobby"
>
="football"
>足球<
/label>
"checkbox" id=
"basketball" value=
"2" v-model=
"hobby"
>
="basketball"
>籃球<
/label>
"checkbox" id=
"pingpong" value=
"3" v-model=
"hobby"
>
="pingpong"
>桌球<
/label>
<
/div>
職業:"" v-model=
"occupation"
>
"1">教師<
/option>
"2">程式設計師<
/option>
"3">警察<
/option>
"4">醫生<
/option>
<
/select>
<
/div>
評價:"" cols=
"30" rows=
"10" v-model=
"desc"
>
<
/textarea>
<
/div>
"submit" @click.prevent=
"action"
> 提交<
/button>
<
/div>
<
/form>
<
/div>
"../js/vue.js"
>
<
/script>
newvue(,
methods:},
})<
/script>
對於單選按鈕：
兩個或多個單選框需要同時通過v-model雙向繫結乙個值
每乙個單選框必須要有value屬性，並且value值不一樣
當某乙個單選框選中的時候v-model會將當前的value值設定為data中的對應的資料
單選不需要通過name屬性進行設定單選關聯只要有v-model即可
對於複選按鈕：
5. 核取方塊需要通過v-model雙向繫結乙個值
6. 每乙個核取方塊必須要有value屬性，而且value的值不能一樣
7. 當某乙個核取方塊選中的時候v-model會將當前的value值改變data中的資料
8. 對於核取方塊的v-model的對應資料必須是陣列型別，否則無法實現多選
對於下拉列表
9. 需要給select通過v-model雙向繫結乙個值
10. 每乙個option必須要有value屬性，並且value值不能一樣
11. 當某乙個option選中的時候v-model會將當前的value值改變data中的資料
12. 對應的data中的資料可以是單個資料也可以是乙個陣列型別
對於文字框和文字域
13. 設定乙個v-model雙向繫結乙個值
14. 不需要使用value屬性
表單域修飾符
.lazy
在預設情況下,v-model在每次input 事件觸發後講將輸入框的值與資料進行同步(除了上述輸入法組合文字時),你可以新增lazy修飾符,從而轉為在change事件_之後_進行同步:
v-model.lazy
="msg"
>
v-model.number
="age"
type
="number"
>
v-model.trim
="msg"
>
Vue學習第三天
複習引入物件 import vuerouter from vue router 安裝外掛程式 vue.use vuerouter 掛載屬性的行為 建立路由物件 let router new vuerouter 將路由物件放入到options中new vue new vue 引數path beijin...
vue第三天系統學習筆記
屬性繫結 1.vue如何動態繫結屬性 v bind 指令用法 a v bind herf url 跳轉 縮寫形式 a herf url 跳轉 2.v model的底層實現原理分析 input value msg v on input msg event.target.value 3樣式繫結 1 cl...
Vue 表單元素繫結
文字框 輸入的內容繫結到 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 optio...