原创

v-model的使用与原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!--
        1.v-model 实现双向绑定
        2.v-model的原理
            使用v-bind绑定input的value属性,然后监听input的动态事件,在回调函数里 获取改动后的数据,赋值给原有数据
    -->
</head>
<body>
<div id="app">
<!--    <input type="text" v-model="message">-->
    <!--1. 复杂写法-->
<!--    <input id="txt1" type="text" :value="message" @input="inputChang">-->

    <!--2. 简单写法-->
    <input id="txt1" type="text" :value="message" @input="message = $event.target.value">
  {{message}}
</div>


<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el : '#app',
    data:{
      message : "hello word"
    },
    methods:{
      inputChang(event){
        //1.根据Id 获取输入框的值
        //let val =  document.getElementById('txt1').value;

        //2.根据事件对象 动态获取改动的值
        let val = event.target.value;
        this.message = val;
      }
    }
  })
</script>
</body>
</html>

Vue
前端

留言板