首页 > 网络编程 > JavaScript > vue单向以及双向数据绑定方式(v-bind和v-model的使用)

vue单向以及双向数据绑定方式(v-bind和v-model的使用)

福牛 4月 23, 2023 48 0

准备工作

首先还是创建一个新的页面写入基本代码

v-bind单向绑定

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.      <meta charset=“UTF-8”>
  6.      <title>初始vue</title>
  7.      <!– 引入vue.js –>
  8.      <script type=“text/Javascript” src=“../js/vue.js”></script>
  9. </head>
  10.  
  11. <body>
  12.      <!– 准备一个容器 –>
  13.      <div id=“root”>
  15.      </div>
  16.      <script type=“text/javascript“>
  17.          // 设置为 false 以阻止 vue 在启动时生成生产提示。
  18.          Vue.config.productionTip = false
  20.      </script>
  21. </body>
  22.  
  23. </html>

简单写一个输入框绑定

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.      <meta charset=“UTF-8”>
  6.      <title>初始vue</title>
  7.      <!– 引入vue.js –>
  8.      <script type=“text/javascript” src=“../js/vue.js”></script>
  9. </head>
  10.  
  11. <body>
  12.      <!– 准备一个容器 –>
  13.      <div id=“root”>
  14.          单项数据绑定：<input type=“text” :value=“name”>
  15.      </div>
  16.      <script type=“text/javascript”>
  17.          // 设置为 false 以阻止 vue 在启动时生成生产提示。
  18.          Vue.config.productionTip = false
  19.          new Vue({
  20.              el:‘#root’,
  21.              data:{
  22.                  name:‘vue你好！’
  23.              }
  24.          })
  25.      </script>
  26. </body>
  27.  
  28. </html>

页面长这样

-1

此时我们打开vue开发工具，动态修改name的值,发现页面的值变了

但是如果我们修改输入框的值，开发工具里面的name不会随着输入框改变

-2

因为v-bind是单向绑定的，想要实现这个功能，我们需要使用双向绑定 v-model

v-model双向绑定

-3

  1.      <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.      <meta charset=“UTF-8”>
  6.      <title>初始vue</title>
  7.      <!– 引入vue.js –>
  8.      <script type=“text/javascript” src=“../js/vue.js”></script>
  9. </head>
  10.  
  11. <body>
  12.      <!– 准备一个容器 –>
  13.      <div id=“root”>
  14.          单项数据绑定：<input type=“text” v-bind:value=“name”><br>
  15.          双项数据绑定：<input type=“text” v-model:value=“name”>
  16.      </div>
  17.      <script type=“text/javascript”>
  18.          // 设置为 false 以阻止 vue 在启动时生成生产提示。
  19.          Vue.config.productionTip = false
  20.          new Vue({
  21.              el:‘#root’,
  22.              data:{
  23.                  name:‘vue你好！’
  24.              }
  25.          })
  26.      </script>
  27. </body>
  28.  
  29. </html>

通过页面我们可以发现，我们输入框会带着下面的开发工具的值一起改变

-4

既然双向绑定这么厉害,那么我们是不是可以放弃单向绑定，一直 使用双向绑定呢？

当然是不可以的，我们再看一个例子

首先是单向绑定，没有任何问题

-5

-6

然后是双向绑定，发现x已经丢了，并且控制台报错了

-7

模板编译失败，v-model不支持这种类型

-8

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.      <meta charset=“UTF-8”>
  6.      <title>初始vue</title>
  7.      <!– 引入vue.js –>
  8.      <script type=“text/javascript” src=“../js/vue.js”></script>
  9. </head>
  10.  
  11. <body>
  12.      <!– 准备一个容器 –>
  13.      <div id=“root”>
  14.          单项数据绑定：<input type=“text” v-bind:value=“name”><br>
  15.          双项数据绑定：<input type=“text” v-model:value=“name”>
  16.          <!– 如下代码是错误的，因为v-model只能应用在表单(输入类)元素上 必须要有value值 –>
  17.          <h2 v-model:x=“name”>你好啊！</h2>
  18.      </div>
  19.      <script type=“text/javascript”>
  20.          // 设置为 false 以阻止 vue 在启动时生成生产提示。
  21.          Vue.config.productionTip = false
  22.          new Vue({
  23.              el:‘#root’,
  24.              data:{
  25.                  name:‘vue你好！’
  26.              }
  27.          })
  28.      </script>
  29. </body>
  30.  
  31. </html>

总结

Vue中有两种绑定方式

1 单项绑定(v-bind):数据只能从data流向页面,可以简写为:

2 双项绑定(v-model):数据不能能从data流向页面，还可以从页面流向data

备注：

1双向绑定一般都应用在表单类元素上(比如input,select,radio等)

2 v-model:value可以简写v-model,因为v-model默认收集的就是value值

单向双向绑定简写如下

  1. <!– 简写 –>
  2. 单项数据绑定：<input type=“text” :value=“name”><br>
  3. 双项数据绑定：<input type=“text” v-model=“name”>
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.      <meta charset=“UTF-8”>
  6.      <title>初始vue</title>
  7.      <!– 引入vue.js –>
  8.      <script type=“text/javascript” src=“../js/vue.js”></script>
  9. </head>
  10.  
  11. <body>
  12.      <!– 准备一个容器 –>
  13.      <div id=“root”>
  14.          <!– 单项数据绑定：<input type=”text” v-bind:value=”name”><br>
  15.          双项数据绑定：<input type=”text” v-model:value=”name”> –>
  16.  
  17.          <!– 简写 –>
  18.          单项数据绑定：<input type=“text” :value=“name”><br>
  19.          双项数据绑定：<input type=“text” v-model=“name”>
  20.          <!– 如下代码是错误的，因为v-model只能应用在表单(输入类)元素上 必须要有value值 –>
  21.          <!– <h2 v-model:x=”name”>你好啊！</h2> –>
  22.      </div>
  23.      <script type=“text/javascript”>
  24.          // 设置为 false 以阻止 vue 在启动时生成生产提示。
  25.          Vue.config.productionTip = false
  26.          new Vue({
  27.          el:‘#root’,
  28.              data:{
  29.                  name:‘vue你好！’
  30.              }
  31.          })
  32.      </script>
  33. </body>
  34.  
  35. </html>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论