Vue 3 - 12 表单绑定

Vue3 表单

用 v-model 指令在表单 <input><textarea><select> 等元素上创建双向数据绑定.

文本框与数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const app = {
		data() {
			return {
				message: "hello"
			}
		},
		methods:{
			getMessage() {
				console.log(this.message);
			}
		},
		template:`
			<div>
				<input v-model="message">
				<button @click="getMessage">获取文本</button>
			</div>
		`
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

多行文本与数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const app = {
		data() {
			return {
				message: "hello"
			}
		},
		methods:{
			getMessage() {
				console.log(this.message);
			}
		},
		template:`
			<div>
				<textarea v-model="message" /><br/>
				<button @click="getMessage">获取文本</button>
			</div>
		`
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

多选框数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const app = {
		data() {
			return {
				check: []
			}
		},
		methods:{
			getMessage() {
				console.log(this.check);
			}
		},
		template:`
			<div>
				<input type="checkbox" v-model="check" value="apple">Apple<br/>
				<input type="checkbox" v-model="check" value="pear">Pear<br/>
				<br/>
				<button @click="getMessage">获取checkbox</button>
			</div>
		`
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

单选框数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const app = {
		data() {
			return {
				radio: []
			}
		},
		methods:{
			getMessage() {
				console.log(this.radio);
			}
		},
		template:`
			<div>
				<input type="radio" v-model="radio" value="apple">Apple<br/>
				<input type="radio" v-model="radio" value="pear">Pear<br/>
				<br/>
				<button @click="getMessage">获取单选值</button>
			</div>
		`
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

下拉选择框数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const app = {
		data() {
			return {
				select: []
			}
		},
		methods:{
			getMessage() {
				console.log(this.select);
			}
		},
		template:`
			<div>
				<select v-model="select">
					<option value="apple">苹果</option>
					<option value="pear">梨子</option>
					<option value="melon">甜瓜</option>
				</select>
				<br/>
				<button @click="getMessage">获取下拉值</button>
			</div>
		`
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

select 的返回对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script>
	const app = {
		data() {
			return {
				select: [
					{text: "苹果", value:{name:"apple", text:"苹果"}},
					{text: "梨子", value:{name:"pear", text:"梨子"}},
					{text: "甜瓜", value:{name:"melon", text:"甜瓜"}},
				]
			}
		},
		methods:{
			getMessage() {
				console.log(this.select);
			}
		},
		template:`
			<div>
				<select v-model="select">
					<option v-for="v in select" v-bind:value="v.value">{{v.text}}</option>
				</select>
				<br/>
				<button @click="getMessage">获取下拉值</button>
			</div>
		`
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

文本框的 number 修饰符

# 在文本框元素中使用 v-model.number ,得到是一个数字值,而不是字符串
<input v-model.number="message" type="number" />

文本框的 trim 修饰符

# 在文本框元素中使用 v-model.trim ,结果是去掉两端的空格、Tab、回车等
<input v-model.trim="message"/>
推荐阅读