vue--单向和双向数据绑定_vue得value单项绑定-CSDN博客

本文链接：https://blog.csdn.net/weixin_44889992/article/details/89366164

本文深入探讨了数据绑定的概念，包括单项和双向数据绑定的区别与应用。通过Vue.js的实例，讲解了如何实现数据与视图的同步更新，以及如何用单项数据绑定模拟双向数据绑定的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单项和双向数据绑定

单项数据绑定：

概念；
将数据和属性进行绑定，也就是原生身上的属性的值就是数据
格式
v-bind:attr = data
简写：
:attr = data
数据更改，视图就更新

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="msg">
</div>
</body>
<script>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
</script>
</html>

双向数据绑定
数据改变，视图更新，
视图改变，数据更新

格式：
v-model:attr=data
简写：可以省略属性
v-model=data
特别强调：
v-model用于表单， v-model默认绑定了value属性

<div id="app">
<input type="text" v-model="msg">
</div>

需求：使用单项数据绑定实现双向数据绑定？
提示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../../basic-source/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value = "msg" @input = "inputHandler">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello 骏哥'
},
methods: {
inputHandler(e){
// console.log( e )
this.msg = e.target.value
}
}
})
</script>
</html>