vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定？

青梅SEO

已于 2024-04-07 00:22:24 修改

阅读量367

点赞数

分类专栏：前端开发文章标签： vue 前端开发

于 2021-06-11 02:25:12 首次发布

本文链接：https://blog.csdn.net/qmzma/article/details/119327257

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. v-bind与v-on实现v-model

v-model其实是一个语法糖，他的背后本质包含两个操作：

① v-bind绑定一个value属性

② v-on指令给当前元素绑定input事件

步骤如下：

① 通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。

<body>
<div id="app">
  <input type="text" :value='message'>
  <h2>{{message}}</h2>
</div>

<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好！',
      }
  })
</script>
</body>

② 通过v-on实现，若通过键入input，则修改app.message的值。

<body>
<div id="app">
  <input type="text" :value='message' @input='valueChange'>
  <h2>{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好！',
      },
      methods:{
          valueChange(event){
              app.message = event.target.value; 
          }
      }
  })
</script>
</body>

③ 更简单的书写方式实现v-on 根本不用绑定方法

<body>
<div id="app">
  <!-- 更简单的书写方式——根本不用绑定方法 -->
  <input type="text" :value = 'message' @input='message = $event.target.value'>

  <h2>{{message}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好！',
      }
  })
</script>
</body>

2. 全部代码演示：

<body>
<div id="app">
  <!-- v-model其实是一个语法糖，他的背后本质包含两个操作：
      1.v-bind绑定一个value属性
      2.v-on指令给当前元素绑定input事件 -->
  <!-- <input type="text" v-model = 'message'> -->

  <!-- 上面语句 等同于 下面的连写 -->
  <!-- 利用 v-bind: 和v-on: 即可实现 -->
  <input type="text" :value='message' @input='valueChange'>

  <!-- 更简单的方法——根本不用绑定方法 -->
  <input type="text" :value = 'message' @input='message = $event.target.value'>

  <h2>{{message}}</h2>
</div>

<script src="../JS/vue.js"></script>
<script>
  const app = new Vue({
      el:'#app',
      data:{
          message:'你好！',
      },
      methods:{
          valueChange(event){
              app.message = event.target.value; 
          }
      }
  })
</script>
</body>

3. 总结：

<!-- 方法1-->
<input type="text" v-model = 'message'>

<!-- 方法2-->
<input type="text" :value = 'message' @input='message = $event.target.value'>

以上两种方式是等同的，都能达到我们的目的。

青梅SEO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定？

vue — 使用v-bind与v-on实现v-modelv-model其实是一个语法糖，他的背后本质包含两个操作：1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件实现步骤如下：① 通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。<body><div id="app"&gt...
复制链接

扫一扫