在Vue中的数据绑定有两种:v-bind和v-model
- v-bind:
绑定的数据只能从Vue中的data流向页面(也就是说只能起到展示data中的数据的效果)
在页面中显示的就是我们可以将data中的数据放到input表单中,但是如果在将表单中的数据进行修改的话,就不会反馈到data里面的数据。 - v-model:
绑定的数据可以实现双向流动,数据可以从Vue中的data流向页面,也可以从页面流向data(也就是说既可以在页面动态的显示data中的数据也可以将页面修改的数据反馈给data)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name"><!--数据只能从data流向页面-->
<br>
双向数据绑定:<input type="text" v-model:value="name"><!--v-model 只能应用在表单类元素上(输入类元素)-->
<!--数据可以从data流向页面,也可以从页面流向data。-->
<!--v-model:value 可以简写为v-model 因为model默认收集的就是value的值-->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'王亚楠'
}
})
</script>
</html>