二、本地应用——Vue指令（3）-优快云博客

本文链接：https://blog.youkuaiyun.com/easy_bird/article/details/118905152

本文介绍了Vue.js中的v-for循环指令，用于根据数据生成列表，结合index和item进行操作，并展示了响应式更新的特性。同时，文章探讨了v-model指令在表单元素中的应用，实现双向数据绑定。通过示例代码，解释了如何使用v-for添加和删除数组元素，以及v-model获取和修改表单输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3、列表循环，表单元素绑定

1. v-for的作用是根据数据生成列表的结构，经常结合数组使用，语法是(item, index) in 数据，item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item, index) in arr">
					{{ index + 1 }}{{ item }}
				</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					arr:["丹徒", "京口", "润州"]
				}
			})
		</script>
	</body>
</html>

item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="添加数据" @click="add" />
			<input type="button" value="移除数据" @click="remove" />
			<ul>
				<li v-for="(item, index) in arr">
					{{ index + 1 }}{{ item }}
				</li>
			</ul>
			<h2 v-for="item in fruit" v-bind:title="item.name">
				{{ item.name }}
			</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					arr:["丹徒", "京口", "润州"],
					fruit:[
						{name:"apple"},
						{name:"orange"}
					]
				},
				methods:{
					add:function(){
						this.fruit.push({name:"banana"});
					},
					remove:function(){
						this.fruit.shift();
					}
				}
			})
		</script>
	</body>
</html>

添加banana：

删除apple：

2. v-model指令的作用是便捷地设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据和表单的元素值是双向关联的。

案例：表单获取message值，按钮绑定事件修改message的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="修改message" @click="setM()"/>
			<input type="text" v-model="message" @keyup.enter='getM()' />
			<h2>{{ message }}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"yyds"
				},
				methods:{
					getM:function(){
						alert(this.message);
					},
					setM:function(){
						this.message = "xswl";
					}
				}
			})
		</script>
	</body>
</html>

表单获取message：