表單輸入綁定、組件基礎 目標： 1. 熟練掌握vue中表單的處理方式 2. 對之前學習的內容簡單回顧一下，並寫一個實例，學以致用（最好脫離文檔） vue中表單的處理方式 1. vue中表單的處理使用了v model指令, 這個指令可以直接把一個數據綁定到表單元素中的value,checked,sel ...
表單輸入綁定、組件基礎
目標：
- 熟練掌握vue中表單的處理方式
- 對之前學習的內容簡單回顧一下，並寫一個實例，學以致用（最好脫離文檔）
vue中表單的處理方式
- vue中表單的處理使用了v-model指令, 這個指令可以直接把一個數據綁定到表單元素中的value,checked,selected特性,同時這些特性也會被忽略掉初始值,而總是將vue實例的數據作為數據來源.
- 使用了v-model之後
<textarea></textarea>之間的插值就不會有效了,會被v-model代替.
雙向綁定(v-model)
1.綁定value: text,textarea(字元串)
text:
<input v-model="message" placeholder="edit me">textarea:
<textarea v-model="message" placeholder="add multiple lines"></textarea>2.綁定checked: checkout(單個綁定布爾值,多個綁定字元串數組), radio(字元串)
checkout(單個):
<input type="checkbox" id="checkbox" v-model="checked">checkout(多個):
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>radio:
<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>3.綁定selected: select(字元串)
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>修飾符(用在v-model指令上)
.lazy: 觸發的事件不一樣,使用change觸發,而不是input觸發
.number: 自動轉為數字類型
.trim:自動過濾後衛空白符號
例子
form.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單輸入綁定</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<form>
<!-- 文本 -->
<input type="text" v-model="formData.textValue">{{formData.textValue}}<br>
<textarea v-model="formData.textareaValue"></textarea>{{formData.textareaValue}}<br>
<!-- checkout(單個) -->
<input type="checkbox" id="checkbox" v-model="formData.isChecked"><label for="checkbox">點我啊</label><br>
<!-- 多個多選 -->
<input type="checkbox" id="haha" value="haha" v-model="formData.checkedValues">
<label for="haha">哈哈</label>
<input type="checkbox" id="hoho" value="hoho" v-model="formData.checkedValues">
<label for="hoho">呵呵</label>
<input type="checkbox" id="hihi" value="hihi" v-model="formData.checkedValues">
<label for="hihi">嘻嘻</label>
<br>
多選選中的是<span v-for="value of formData.checkedValues"> {{value}} </span>
<br>
<!-- 單選 -->
<input type="radio" id="one" value="one" v-model="formData.pickedValue">
<label for="one">one</label>
<input type="radio" id="two" value="two" v-model="formData.pickedValue">
<label for="two">two</label>
<input type="radio" id="three" value="three" v-model="formData.pickedValue">
<label for="three">three</label>
<br>
單選選中的是<span> {{formData.pickedValue}} </span>
<br>
<!-- 下拉選擇框 -->
<select v-model="formData.selectedValue">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
下拉選擇框選中的是<span> {{formData.selectedValue}} </span>
<br>
<a @click="submitForm">提交</a>
</form>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
formData: {
textValue: '',
textareaValue: '',
isChecked: true,
checkedValues: [],
pickedValue:'',
selectedValue: ''
},
msg: '這是一句消息'
},
methods: {
submitForm: function(){
for(var key in this.formData) {
obj[key] = this.formData[key];
}
console.log(this.formData);
console.log(this.msg);
}
}
});
</script>
</body>
</html>
