vue小白教程：数据绑定（二）v-model

• 双向数据绑定MVVM： model改变会影响视图view，view视图改变反过来影响model，必须在表单里面使用。
• v-model 实现视图->数据的绑定。
• v-model是一个指令，限制在input、select、textarea、components中使用，修饰符.lazy(取代input监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。
• 下面示例为在input中利用v-model绑定msg，实现信息绑定显示。

<template>
  <div>
    <h2>{{msg1}}</h2>
    <input v-model="msg1"><button @click="xianshiText1()">显示信息1</button>

    <h2>{{msg2}}</h2>
    <input v-model.lazy="msg2"><button @click="xianshiText2()">显示信息2</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg1: '你好，vue',
      msg2:'再见，vue'
    }
  },
  methods:{
    xianshiText1(){
      this.msg1 = "显示1"
    },
    xianshiText2(){
      this.msg2 = "显示2"
    }
  }
}

显示页面效果

点击按钮“显示信息1”

对比是否添加.lazy的效果

不添加.lazy上方显示随输入框内容及时变动，添加.lazy延迟，数据一次性加载显示