Vue基础03_数据绑定

2022/5/2 23:42:57

编程Tag： vue 数据 data 绑定 model 双向 03

本文主要是介绍Vue基础03_数据绑定，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Vue中有2种数据绑定的方式：　　1.单向绑定(v-bind)：数据只能从data流向页面。　　2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。　　备注：　　　　1.双向绑定一般都应用在表单类元素上（如：input、select等）　　　　2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>数据绑定</title>
 8     <!-- 引入Vue -->
 9     <script type="text/javascript" src="../js/vue.js"></script>
10 </head>
11 <body> 
12     <!-- 准备好一个容器 -->
13     <div id="root">
14         单向数据绑定: <input type="text" v-bind:value="name">
15         <br />
16         双向数据绑定: <input type="text" v-model:value="name">
17         <br/>
18         <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
19         <!-- <h2 v-model:x="name">你好啊</h2> -->
20     </div>     
21 </body>
22 
23 <script type="text/javascript">
24     Vue.config.productionTip = false    //阻止 vue 在启动时生成生产提示。
25     new Vue({
26         el:'#root',
27         data:{
28             name:'Vue博客'
29         }
30     })
31 </script>
32 </html>

1 <!-- 普通写法 -->
2 单向数据绑定：<input type="text" v-bind:value="name"><br/>
3 双向数据绑定：<input type="text" v-model:value="name"><br/>
4 
5 <!-- 简写 -->
6 单向数据绑定：<input type="text" :value="name"><br/>
7 双向数据绑定：<input type="text" v-model="name"><br/>

这篇关于Vue基础03_数据绑定的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue基础03_数据绑定

相关编程文章