【Vue.js】010-表单输入绑定：v-model

骑猪看日落 2023-10-05 08:26 15阅读 0赞

# **目录** #

一、基础用法

1、概述（官方）

2、代码演示

3、运行结果

二、值绑定

1、概述（官方）

2、复选框（官方）

3、单选按钮

4、选择框的选项

三、修饰符

四、再组件上使用v-model

--------------------

# 一、基础用法 #

## 1、概述（官方） ##

**v-model双向绑定，一个地方改变另一个地方也会随之改变，就像是一个公共变量一样；**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

![20200815113500626.png][]

## 2、代码演示 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../../js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			
    			<input v-model="message" placeholder="edit me">
    			<p>Message is: {
       { message }}</p>
    			<br />
    			
    			<textarea v-model="message" placeholder="add multiple lines"></textarea>
    			<br />
    			<span>Multiline message is:</span>
    			<p style="white-space: pre-line;">{
       { message }}</p>
    			<br />
    			
    			<input type="checkbox" id="checkbox" v-model="checked">
    			<label for="checkbox">{
       { checked }}</label>
    			<br />
    			
    			<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>
    			<br />
    			<span>Checked names: {
       { checkedNames }}</span>
    			<br>
    			
    			<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 />
    			<span>Picked: {
       { picked }}</span>
    			<br />
    			
    			<select v-model="selected">
    				<option disabled value="">请选择</option>
    				<option>A</option>
    				<option>B</option>
    				<option>C</option>
    			</select>
    			<span>Selected: {
       { selected }}</span>
    			<br />
    			
    			<select v-model="selected1" multiple style="width: 50px;">
    				<option>A</option>
    				<option>B</option>
    				<option>C</option>
    			</select>
    			<br />
    			<span>Selected: {
       { selected1 }}</span>
    			<br />
    			
    			<select v-model="selected2">
    				<option v-for="option in options" v-bind:value="option.value">
    					{
       { option.text }}
    				</option>
    			</select>
    			<span>Selected: {
       { selected2 }}</span>
    		</div>
    		<script>
    			var app = new Vue({
    				el: "#app",
    				data: {
    					message: "",
    					checked: false,
    					checkedNames: [],
    					picked: "",
    					selected: "",
    					selected1: [],
    					selected2: "A",
    					options: [{
    							text: 'One',
    							value: 'A'
    						},
    						{
    							text: 'Two',
    							value: 'B'
    						},
    						{
    							text: 'Three',
    							value: 'C'
    						}
    					]
    				}
    			});
    		</script>
    	</body>
    </html>

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

# 二、值绑定 #

## 1、概述（官方） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app">
    			<input type="radio" v-model="picked" value="这是值,点击之后显示!" />
    			<h2>{
       {picked}}</h2>
    		</div>
    		<script src="../../js/vue.js"></script>
    		<script>
    			const app = new Vue({
    				el: '#app',
    				data: {
    					// 选择之后内容变成value的内——“这是值,点击之后显示!”
    					picked:"目前为空！未选择呢！"
    				}
    			})
    		</script>
    	</body>
    </html>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 2、复选框（官方） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

## 3、单选按钮 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

## 4、选择框的选项 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6][]

# 三、修饰符 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8][]

# 四、再组件上使用v-model #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200815113405196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20200815113500626.png]: https://img-blog.csdnimg.cn/20200815113500626.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200815115133397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020081511534151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210117133517165.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200815120350726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200815120423489.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200815120451853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200815120537876.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200815120559908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200815120643563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70