vue中v-model的本质

nanzai11111

于 2020-10-15 14:39:31 发布

阅读量219

点赞数

分类专栏： vue学习心得文章标签： Vue.js v-model 数据绑定双向数据流前端开发

本文链接：https://blog.csdn.net/nanzai11111/article/details/109096811

版权

vue学习心得专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
</head>
<body>
<!--v-model的原理：相当于两个指令的结合v-bind:value("message")
v-on:input(message)(监听用户有没有输入东西)-->
<div id="app">
<!--  1、-->
  <input type="text" v-model="message">
<!--  2、-->
  <!--<input type="text" :value="message" v-on:input="valueChange">
  <h2>{{message}}</h2>-->
<!--  3、-->
  <!--<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){
        this.message=event.target.value;
      }
    }*/
  })
</script>
</body>
</html>