实现vue双向数据绑定v-model

最新推荐文章于 2024-06-10 22:18:41 发布

大碗米饭

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量73

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/Lcaiji/article/details/111935873

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      自写
      <input-my @input="changeValue" :value="name"></input-my><br />
      v-model
      <input-my v-model="name"></input-my><br />
      {{name}}
      <button @click="add">修改</button>
    </div>
    <script>
      //子组件
      Vue.component("input-my", {
        props: ["value"],
        template: "<input :value=value @input='change'></input>",
        methods: {
          change(e) {
            //   获得属性的值
            console.log(e.target);
            // 子传父值(自定义事件)
            // 子组件中的input事件是v-model
            this.$emit("input", e.target.value);
          },
        },
      });
      //   父组件
      let app = new Vue({
        el: "#app",
        data() {
          return {
            name: "",
          };
        },
        methods: {
          changeValue(e) {
            this.name = e;
          },
          add() {
            this.name = this.name + "add";
          },
        },
      });
    </script>
  </body>
</html>

大碗米饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现vue双向数据绑定v-model

<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu
复制链接

扫一扫