大家说的vue双向数据绑定怎么理解？

用户输入信息与数据的内容互相绑定，变化一致，对于用户交互非常好用。

用户输入信息时，页面的对应的信息会发生变化。当页面中的信息发生变化时，输入框中信息也同样会发生变化。

点击查看演示

示例代码：

<template>
<div class="mypage">
    <div class="top"><button class="prew" @click="goPrew()">上一页</button><button class="next" @click="goNext()">下一页</button></div>
    <div>第{{num}}页</div>
    <div>{{msg}}</div>
    <div>{{msg1}}-<button @click="changeFv()">模拟前面数据变化</button></div>
    <div><input type="text" v-model="msg1"></div>
    <button @click="goHome()">返回第一页</button>
</div>
</template>
<script>
export default {
  name: 'mypage',
  data () {
    return {
      msg: '双向绑定',
      msg1: '改变我你也变',
      num: 6
    }
  },
  methods: {
    goHome () {
      this.$router.push('/')
    },
    goPrew () {
      this.$router.go(-1)
    },
    goNext () {
      this.$router.push('/von')
    },
    changeFv () {
      this.msg1 = this.msg1 + 1
    }
  }
}
</script>
<style>
.tips{color:red;}
</style>