5.双向数据绑定

1.双向数据绑定

<template>
  <div id="app">
    <!-- 双向数据绑定MVVM vue就是一个mvvm框架， model改变影响视图，视图改变影响model -->
    <!-- 双向数据绑定必须结合表单使用 -->
    <h2>{{msg}}</h2>
    <input type="text" v-model="msg">
    <p></p>
    <button @click="changeMsg()">修改msg影响视图</button>

  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg:'双向数据绑定'
    }
  },
  methods:{
    changeMsg(){
      this.msg='点击修改msg'
    }
  }
}
</script>
<style>

</style>