css
html
vue
目錄
處理表單輸入
1，單行文本
2，多行文本textarea
3，複選框checkbox
4，單選按鈕radio
5，select下拉選擇框
6，全部input類型
父子組件的表單數據交換
1，使用sync
2，使用v-model模式
3，在子組件中使用model源碼
處理表單輸入
1，單行文本
<!-- 單行文本 -->
<input type="text" v-model.trim="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
<input v-bind:value="message" v-on:input="message=$event.target.value">
2，多行文本textarea
<p>{{ message1 }}</p>
<textarea @input="handleInput" v-model.lazy="message1" placeholder="add multiple lines"></textarea>
3，複選框checkbox
<!-- 複選框 -->
<p>
<input @input="handleInput" type="checkbox" id="checkbox" v-model.number="checked" true-value="1" false-value="2" />
<label for="checkbox">{{ checked }}</label>
</p>
<!-- 多個複選框 -->
<p>
<input type="checkbox" id="checkbox1" v-model="checked2" value="value1" />
<label for="checkbox1">value1</label>
<input type="checkbox" id="checkbox2" v-model="checked2" value="value2" />
<label for="checkbox2">value2</label>
<input type="checkbox" id="checkbox3" v-model="checked2" value="value3" />
<label for="checkbox3">value3</label>
<br/>
<span>Checked names: {{ checked2 }}</span>
</p>
4，單選按鈕radio
<!-- 單選按鈕 -->
<div>
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<input type="radio" id="three" value="Three" v-model="picked" />
<label for="three">Three</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
5，select下拉選擇框
<!-- 選擇框 -->
<div>
<select v-model="selected">
<option disabled value>請選擇</option>
<option :value="{ number: 1 }">1</option>
<option :value="{ number: 2 }">2</option>
<option :value="{ number: 3 }">3</option>
</select>
<span>Selected: {{ selected.number }}</span>
</div>
<!-- 多選選擇框 -->
<div>
<select multiple v-model="selected2">
<option disabled value>請選擇</option>
<option :value="{ number: 1 }">1</option>
<option :value="{ number: 2 }">2</option>
<option :value="{ number: 3 }">3</option>
</select>
<span>Selected: {{ selected2 }}</span>
</div>
6，全部input類型
button 定義可點擊的按鈕（一般與 JavaScript 一塊兒使用來啓動腳本）。
checkbox 定義複選框。
colorNew 定義拾色器。
dateNew 定義 date 控件（包括年、月、日，不包括時間）。
datetimeNew 定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）。
datetime-localNew 定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。
emailNew 定義用於 e-mail 地址的字段。
file 定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。
hidden 定義隱藏輸入字段。
image 定義圖像做爲提交按鈕。
monthNew 定義 month 和 year 控件（不帶時區）。
numberNew 定義用於輸入數字的字段。
password 定義密碼字段（字段中的字符會被遮蔽）。
radio 定義單選按鈕。
rangeNew 定義用於精確值不重要的輸入數字的控件（好比 slider 控件）。
reset 定義重置按鈕（重置全部的表單值爲默認值）。
searchNew 定義用於輸入搜索字符串的文本字段。
submit 定義提交按鈕。
telNew 定義用於輸入電話號碼的字段。
text 默認。定義一個單行的文本字段（默認寬度爲 20 個字符）。
timeNew 定義用於輸入時間的控件（不帶時區）。
urlNew 定義用於輸入 URL 的字段。
weekNew 定義 week 和 year 控件（不帶時區）。
父子組件的表單數據交換
1，使用sync
<template>
<input name="xxxx" v-model="currentValue" @input="handleModelInput" />
</template>
<script>
export default {
name: "ModelComponent2",
props: {
value: [String, Number, Date]
},
methods: {
handleModelInput() {
this.$emit("update:value", this.currentValue);
}
},
watch: {
// 屬性是隻讀的
value(newValue) {
this.currentValue = newValue;
}
},
data: () => ({
currentValue: ""
})
};
</script>
<p>
<SyncComponent1 :value.sync="text1" ></SyncComponent1>
text1:{{text1}}
</p>
1，在子組件中當屬性變化時，主動派發一個「update:xxx」事件，並附帶xxx的值
2，在父組件中，使用:xxx.sync將數據雙向綁定到一個data變量上
2，使用v-model模式
<template>
<input name="xxxx" v-model="currentValue" @input="handleModelInput" />
</template>
<script>
export default {
name: "SyncComponent2",
props: {
value: [String, Number]
},
methods: {
handleModelInput() {
this.$emit("input", this.currentValue);
}
},
watch: {
// 屬性是隻讀的
value(newValue) {
this.currentValue = newValue;
}
},
data: () => ({
currentValue: ""
})
};
</script>
<p>
<SyncComponent2 v-model="text2" ></SyncComponent2>
text2:{{text2}}
</p>
3，在子組件中使用model
<template>
<input name="xxxx" v-model="currentValue" @input="handleModelInput" />
</template>
<script>
export default {
name: "SyncComponent3",
model: {
prop: 'value',
event: 'change'
},
props: {
value: [String, Number]
},
methods: {
handleModelInput() {
// 與aync模式相比，發射的事件不一樣
this.$emit("change", this.currentValue);
}
},
watch: {
// 屬性是隻讀的
value(newValue) {
this.currentValue = newValue;
}
},
data: () => ({
currentValue: ""
})
};
</script>
<SyncComponent3 v-model="text3" ></SyncComponent3>
text3:{{text3}}
</p>
源碼
參考連接
http://www.fly63.com/article/detial/701git
https://www.jb51.net/article/142657.htm程序員
https://cn.vuejs.org/v2/guide/components-custom-events.html#自定義組件的-v-modelweb
https://cn.vuejs.org/v2/guide/forms.html#在組件上使用-v-modelapi
https://cn.vuejs.org/v2/guide/forms.html數組
https://www.runoob.com/tags/att-input-type.html緩存
相關閱讀
本文分享自微信公衆號 - 程序員LIYI（CoderLIYI）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。