vue-vmodel数据的双向绑定

1、没有出现双向绑定之前

( 1 ) 在没有出现数据双向绑定之前，我们一般要更新页面的数据，需要找到节点，修改节点的数据，拿Jquery举例：

// HTML代码
<div id='ele'>我是要修改的值</div>

//Js代码 Jq写法
let msg = '我是要修改的值';
$('#ele').val(msg);

这样的代码相对还是比较简单，如果我们要实现一个用户输入给出对应提示。相对就比较麻烦了。

// HTML代码
<div id='notice'>这里要展示用户输入的信息<div>
<input type='text' name='id_card' onkeyup='showNotice()' id='user_input'/>

// JS代码 需要给input 添加keyup事件
function showNotice(){
   let user_input = $('[name=id_card]').val();
   $('#notice').html( user_input );
}

2、Vue双向绑定

(2) Vue是双向绑定实现改功能

// HTML
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div style="color: red">{{id_card}}</div>
    <input  type="text" v-model="id_card"/>
  </div>
</template>

//JS代码
<script>
export default {
  name: 'demo',
  data () {
    return {
      id_card: '12',
      msg: 'Welcome to Demo'
    }
  }
}
</script>

代码说明

<input  type="text" v-model="id_card"/>

其中v-model代表把input输入的值和 js中定义的id_card做双向绑定，用户在输入的时候，id_card会自动修改为用户输入的值

而我们上边的div，输出的也是id_card变量，这样的话，提示信息也会跟着改变。

这样使用双向绑定就可以很方便的修改我们的数据了。

3、实现数量加的功能

<div @click="changeNumber()">
 点击{{number}}
</div>

export default {
  name: 'demo',
  data () {
    return {
      id_card: '12',
      msg: 'Welcome to Demo'，
      number: 1
    }
  },
  method: {
	changeNumber: function () {
      this.number++
      // 获取点击的元素 对应的值
      console.log(event.target.innerHTML.trim())
    }
  }
}
</script>