重学Vue——v-model用v-bind和v-on的简易实现

最新推荐文章于 2024-05-08 17:53:48 发布

xiaoQinVar

最新推荐文章于 2024-05-08 17:53:48 发布

阅读量396

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45593068/article/details/104589936

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

v-model用v-bind和v-on的简易实现

<body>
  <div id="app">
    <div>{{ msg }}</div>
    <input type="text" :value="msg" @input="input" ref="input">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vue = new Vue({
      el: '#app',
      data: {
        msg: '标签内容会被我替换',
      },
      methods: {
        input($event) {
          
          return this.msg = $event.target.value;
        }
      }
    })
  </script>
</body>

图解

在这里插入图片描述

表单元素通过v-bind将value值绑定msg,用v-on:input方法操作msg数据实现v-model的功能.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaoQinVar

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重学Vue——v-model用v-bind和v-on的简易实现

v-model用v-bind和v-on的简易实现<body> <div id="app"> <div>{{ msg }}</div> <input type="text" :value="msg" @input="input" ref="input"> </div> <script src...
复制链接

扫一扫