与v-model等价的写法

使用下面的两个操作,可以等价于v-model的双向绑定

  • :value进行messageinput的传参
  • @input进行inputmessage的传参
<body>

  <div id="app">
    <input type="text" :value="message" @input="changeValue">
    <!-- <input type="text" v-model="message"> -->
    <h2>{{message}}</h2>
  </div>

  <script type="text/javascript">

    const app = new Vue({
      el: '#app',
      data: {
        message: '你好,世界!'
      },
      methods: {
        changeValue(event){
          this.message = event.target.value;
        }
      }
    })

  </script>
</body>

猜你喜欢

转载自blog.csdn.net/weixin_43207025/article/details/107237302