【Vue.js】属性绑定和双向数据绑定

最新推荐文章于 2023-06-02 18:08:39 发布

hcq29

最新推荐文章于 2023-06-02 18:08:39 发布

阅读量229

点赞数

分类专栏： Vue.js 文章标签： vue 属性绑定数据双向绑定

本文链接：https://blog.csdn.net/weixin_42339197/article/details/95940836

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、属性绑定

创建模板

首先先创建一个最基础的模板：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset="utf-8">
	<title>属性绑定和双向数据绑定</title>
</head>
<body>
	<div id="app"> 
	    <div title="this is hello world">hello world</div>
	</div>
 
 
 
	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({ 
			el :'#app'
		})
	</script>
 
</body>
</html>

实现内容

现在想要实现的效果是：随时更新 title 的值。

可以在实例的数据里定义一个 title ，使用v-bind:title="title"将 title与数据项 data 中的 title 进行绑定

<div id="app"> 
    <div v-bind:title="title">hello world</div>
</div>
 
<script type="text/javascript" src="../vue.min.js"></script>
<script type="text/javascript">
    var app = new Vue({ 
        el :'#app',
        data:{
            title: "this is hello world"
        }
    })
</script>

v-bind:title="title"中的title不再是一个字符串，它是一个JS表达式。

模板指令等号后面的内容是JS表达式。

另外：v-bind: 可以缩写成 : （语法糖）

具体效果

2、数据的双向绑定

创建模板

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset="utf-8">
	<title>属性绑定和双向数据绑定</title>
</head>
<body>
	<div id="app"> 
	    <div v-bind:title="title">hello world</div>
	    <input type="text" >
	    <div>{{content}}</div>
	</div>
 
	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({ 
			el :'#app',
			data:{
				title: "this is hello world",
				content: "this is content"
			}
		})
	</script>
 
</body>
</html>