Vue之v-on:click=" " 事件

最新推荐文章于 2024-12-07 10:38:21 发布

Mr.ZKH

最新推荐文章于 2024-12-07 10:38:21 发布

阅读量734

点赞数

分类专栏： Vuejs

本文链接：https://blog.csdn.net/weixin_44415461/article/details/96770838

版权

Vuejs 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

v-on:click=" " 和 @click=" " 效果一样
v-model=" " 双向数据绑定
@keyup=" " 键盘事件
el: ’ # ’ 作用域名称，必须加 #
data: { } 初始化数据，可以定义常量、字符串、数组、对象等。。。
methods: {
方法名：function(){
代码…
}
}
所有方法都要写在methods的方法体里，除了原生的JavaScript方法

在方法体里，方法调用data定义的变量，必须用this关键字
比如：this.num

parseInt() 从页面传过来的数据是字符串，要使用parseInt(this.变量名)方法转换成整型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-on</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{num}}</p>
		<p>
			<button v-on:click="add">+1</button>
			<button @click="sub">-1</button>
		</p>
		<input type="text" v-model="newNum" @keyup="onEnter">
	</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			num: 10,
			newNum: 1
		},
		methods: {
			add: function(){
				return this.num++;
			},
			sub: function(){
				return this.num--;
			},
			onEnter: function(){
				this.num += parseInt(this.newNum);
			}
		}
	})

</script>
</html>