<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../vue.js"></script>
<title>Document</title>
</head>
<body>
<!--
单向数据绑定:利用v-bind
双向数据绑定:利用v-model
-->
<div id="root">
单向数据绑定:<input type="text" v-bind:value="msg">
<br>
双向数据绑定:<input type="text" v-model:value="msg2">
<!--
v-model只能用于 表单类元素(输入类元素),含有value值
v-model:value可以简写为v-model,因为它默认绑定value
-->
<hr>
单向数据绑定:<input type="text" :value="msg">
<br>
双向数据绑定:<input type="text" v-model="msg2">
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
msg:"hello",
msg2:"hello",
},
})
</script>
</body>
</html>
【vue】数据绑定
最新推荐文章于 2024-09-21 11:29:05 发布
本文介绍了Vue.js中单向和双向数据绑定的概念及用法。通过`v-bind`实现单向绑定,`v-model`实现双向绑定。示例代码展示了如何在输入框中应用这些绑定,强调了`v-model`在表单元素上的使用及其简写形式。
摘要由CSDN通过智能技术生成