Vue 中属性绑定和双向数据绑定

最新推荐文章于 2024-08-22 15:37:44 发布

purple_lumpy

最新推荐文章于 2024-08-22 15:37:44 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/purple_lumpy/article/details/81155515

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

属性绑定

Vue 属性绑定指令 v-bind:属性名=“js表达式”，其中"v-bind:" 可以简写为“：”。

例子

<!DOCTYPE html>
<html>
<head>
	<title>属性绑定和双向数据绑定</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div :title="'Ann ' + title">hello world</div>
		<!-- <div v-bind:title="'Ann ' + title">hello world</div> -->
	</div>

	<script>
		new Vue({
			el:"#root",
			data: {
				title: "this is hello world"
			}
		})
	</script>
</body>
</html>

双向数据绑定

单向数据绑定，即数据决定页面内容，但页面内容改变不了数据。

双向数据绑定，即页面和数据可以互相决定。

Vue 模版指令：v-model="vue实例中data中的属性名"

例子

<!DOCTYPE html>
<html>
<head>
	<title>属性绑定和双向数据绑定</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div :title="'Ann ' + title">hello world</div>
		<!-- <div v-bind:title="'Ann ' + title">hello world</div> -->
		<input v-model="content"/>
		<div>{{content}}</div>
	</div>

	<script>
		new Vue({
			el:"#root",
			data: {
				title: "this is hello world",
				content: "this is content"
			}
		})
	</script>
</body>
</html>