快速入门Vue第三天：Vue本地应用（3）v-on、v-for、v-model...

最新推荐文章于 2021-10-01 08:30:00 发布

青小俊

最新推荐文章于 2021-10-01 08:30:00 发布

阅读量191

点赞数

分类专栏：编程开发文章标签： vue js javascript

本文链接：https://blog.csdn.net/a597934448/article/details/107095596

版权

编程开发专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章目录

9、v-for

根据数据生成列表结构。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<ul>
			<li v-for="(city,index) in china">
				{{index+1}}中国城市：{{city}}
			</li>
		</ul>
		<input type="button" @click="add" value="新增" />
		<input type="button" @click="sub" value="减少" />
		<h3 v-for="item in tuxing" v-bind:title="item.name">
			{{item.name}}
		</h3>
	</div>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				china:["北京","上海","广州"],
				tuxing:[
					{name:"三角形"},
					{name:"四边形"},
				]
			},
			methods:{
				add:function(){
					this.tuxing.push({name:"多边形"});
				},
				sub:function(){
					this.tuxing.shift();
				}
			},
		})
	</script>
	</body>
</html>

效果如图：
v-for效果

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

10、v-on 补充

传递自定义参数，事件修饰符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="doit('老铁',666)" value="老铁666" />
			<input type="text" @keyup.enter="sayhi" />
	</div>
	<script>
		var app = new Vue({
			el:"#app",
			methods:{
				doit:function(p1,p2){
					console.log(p1);
					console.log(p2);
				},
				sayhi:function(){
					alert("你好");
				}
			}
		})
	</script>
	</body>
</html>

效果如图：
v-on事件

事件绑定的方法写成函数调用的形式，可以传入自定义参数。
定义方法时需要定义形参来接收传入的实参。
事件的后面跟上 .修饰符可以对事件进行限制。
.enter 可以闲置触发的按键为回车。
事件修饰符有很多种。

11、v-model

获取和设置表单元素的值（双向数据绑定）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{message}}</h2>
			<input type="text" v-model="message" @keyup.enter="getM" />
			<input type="button" value="修改message" @click="setM" />
	</div>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"程序员"
			},
			methods:{
				getM:function(){
					alert(this.message);
				},
				setM:function(){
					this.message = "男神";
				}
			}
		})
	</script>
	</body>
</html>

v-model

v-model指令作用是便捷的设置和获取表单元素的值。
绑定的数据会和表单元素值相关联。
绑定的数据<——>表单元素的值（双向绑定，无论修改谁，另外一个都会同步更新）。

12、小黑记事本

(1)、介绍

小黑记事本
包括：5个功能，左下角可以显示统计，右下角可以清空，没有输入时会隐藏。

(2)、新增

1.生成列表结构（v-for 数组）v-for="(item,index) in list"
2.获取用户输入（v-model）list:["","",""];
3.回车,新增数据（v-on.enter 添加数据）@keyup.enter="" 方法体中用push方法

(3)、删除

v-on绑定自定义事件传入index参数
点击删除指定内容（v-on splice howmany索引） this.list.spice(index,1)
数据改变，和数据绑定的元素同步改变

(4)、统计

基于数据的开发方式
v-text 使用差值表达式的方法 {{list.length}}

(5)、清空

点击清除所有信息（v-on 清空数组） this.list = [];

(6)、隐藏

当没有数据时，隐藏元素（v-show或v-if 数组非空）找到父标签 v-if=“list.length!=0” 或者各自隐藏内部元素
效果如图：

(7)、总结

列表结果可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制,比如 .enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值
基于数据的开发方式 之前我是基于dom，非常麻烦

青小俊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
快速入门Vue第三天：Vue本地应用（3）v-on、v-for、v-model...

文章目录9、v-for10、v-on 补充11、v-model9、v-for根据数据生成列表结构。<!DOCTYPE html><!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> </head> &lt
复制链接

扫一扫