29.ES6：表单输入绑定（双向数据绑定）

<template>
  <div class="hello">
    <!-- 
      双向数据绑定:
        定义: 一边在输入框中输入,一边在标签或函数中显示输入结果
        可以使用v-model指令在表单input textarea select元素上创建绑定,用于监听用户的输入事件来更新数据
     -->
     <!-- 测试1:输出的同时在标签中显示 -->
     <input v-model="username"><input v-model="pwd">
     <button @click="print(username)">打印</button>
     <!-- 按钮绑定一个函数,让他打印标签的内容 -->
     <p>Name:{{username}},密码是:{{pwd}}</p>

     <!-- 标签修饰符: -->
     <!-- .lazy 默认情况下,每次输入完,数据立刻同步,可以使用lazy,让他点击框外或回车后同步 -->
     <!-- .trim 自动去掉前后空格 -->
     <input v-model.lazy="username"><input v-model.trim="pwd">
     <p>Name:{{username}},密码是:{{pwd}}</p>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      username:'',
      pwd:''
    }
  },
  methods:{
    print(data){
      console.log(data);
    }
  }
}
</script>