vue双向数据绑定指令v-model的用法

<标签 v-model="data成员"></标签>

 <div id="app">
    <p>{{ city }}</p>
    <p><input type="text" :value="city"></p>
    <p><input type="text" v-model="city"></p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        city:'北京'
      },
    })
  </script>

  <div id="app">
    <h2>v-model简易原理</h2>
    <p>{{city}}</p>
    <p><input type="text" :value="city"></p>
    <hr />
    <!-- 事件@xxx="方法名称/js语句" -->
    <!-- $event:在vue的事件被绑定元素的行内部，代表事件对象 -->
    <p><input type="text" :value="city" @input="city = $event.target.value"></p>
      
    <p><input type="text" :value="city" @input="feel"></p>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        city:'北京'
      },
      methods:{
        feel(evt){
          // console.log(evt)  // InputEvent输入键盘事件对象
          // evt.target: 触发当前事件的元素节点dom对象(类似document.getElementById()的返回结果)
          // console.dir(evt.target)
          // console.log(evt.target.value)  // evt.target.value 获得输入框当前输入的信息
          // 把输入框已经输入的信息赋予给city
          this.city = evt.target.value
        }
      }
    })
  </script>