二、本地应用——Vue指令（3）

最新推荐文章于 2024-09-05 20:16:05 发布

Sean_me

最新推荐文章于 2024-09-05 20:16:05 发布

阅读量80

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/easy_bird/article/details/118905152

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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：