Vue模板语法

最新推荐文章于 2024-05-22 15:40:43 发布

zhongyanS

最新推荐文章于 2024-05-22 15:40:43 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/zhongyanS/article/details/107272245

版权

双向数据绑定

样例：v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div>
				<input type="text" v-model="msg">
			</div>
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					msg: "hello world"
				}
			})
		</script>
	</body>
</html>

事件绑定

v-on

样例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{num}}</div>
			<div>
				<button type="button" v-on:click="num++">点击</button>
			</div>
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					num: 0
				}
			})
		</script>
	</body>
</html>

事件绑定方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{num}}</div>
			<div>
				<button type="button" v-on:click="handle">点击</button>
			</div>
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					num: 0
				},
				methods:{
					handle: function(){
						this.num++
					}
				}
			})
		</script>
	</body>
</html>

zhongyanS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法

双向数据绑定样例：v-model<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div>{{msg}}</div> <div> <input type="text
复制链接

扫一扫