一、表单输入绑定

1、文本

<p>Message is:{{message}}</p>
<input v-model="message" place holder="edit me" />

• 在input里输入内容，Message内容也同步输出
• 若我对Message进行修改（通过点击button修改，<p><button @click="message='lanlan'">点我</button></p>），input里的内容也同步修改
• 多行文本：input=>textarea

2、复选框

1. 单个复选框

<template>
  <div>
    <label>
      <input type="checkbox" v-model="x" />
      <span>x:{{x}}</span>
    </label>
  </div>
</template>
<sript>
  data(){
    return{
      x:true  //绑定布尔类型值
    }
  }
</script>

2. 多个复选框

<template>
  <div>爱好：{{x}}
    <label>
      <input type="checkbox" v-model="x" :value="1" />
      <span>抽烟</span>
    </label>
    <label>
      <input type="checkbox" v-model="x" :value="2" />
      <span>喝酒</span>
    </label>
    <label>
      <input type="checkbox" v-model="x" :value="3" />
      <span>烫头</span>
    </label>
  </div>
</template>
<sript>
  data(){
    return{
      x:[]  //绑定到同一个数组
    }
  }
</script>

3. 单选框

• checkbox=>radio

3、选择框

• 写法1：直接列选项

<template>
  <div>你想要：{{x}}
    <hr />
    <select v-model="x">
      <option value> - </option>
      <option :value="1">抽烟</option>
      <option :value="2">喝酒</option>
      <option :value="3">烫头</option>
    </select>
  </div>
</template>

• 写法2：选项从数组里拿，效果同上

<template>
  <div>你想要：{{x}}
    <hr />
    <select v-model="x">
      <option value> - </option>
      <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option>
    </select>
  </div>
</template>
<sript>
  data(){
    return{
      array:[
        {text:"抽烟",value:1},
        {text:"喝酒",value:2},
        {text:"烫头",value:3}
      ]，
      x:''
    }
  }
</sript>

• 多选时，加multiple，<select multiple v-model="x">，不好用，少用

4、form表单（要搭配button使用最好）

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <label>
        <span>用户名</span>
        <input type="text" v-model="user.username" />
      </label>
      <label>
        <span>密码</span>
        <input type="password" v-model="user.password" />
      </label>
      <button type="submit">登录</button>
    </form>
  </div>
</template>
<script>
export default{
  name:"App",
  data(){
    return{
      user:{
        username:'',
        password:''
      },
      x:[]
    }
  }
}
</script>

• 输入用户名、密码后，直接回车，表单内容就会更新（这就是用button的好处）

二、修饰符

1、.lazy

1. 先理解input和change事件

• input事件，接受键盘、鼠标等任何输入设备的输入（即时显示）
• change事件，只在input失去焦点时触发（等焦点移出时显示）

2. .lazy修饰符适用于富文本编辑器，移出焦点时一次性获取富文本内容
3. <input type="text" v-model.lazy="user.username" />

2、.number

1. 只获取数字内容
2. <input type="text" v-model.number="user.username" />

3、.trim

1. 去掉两头空格
2. <input type="text" v-model.trim="user.username" />

三、v-model

• v-model是双向绑定。变量变化时，UI也变；用户改变UI时，数据也会变化
• v-model是v-bind:value、v-on:input的语法糖
• <input type="text" v-model="user.username" />等于<input type="text" :value="user.username" @input="user.username=$event.target.value" />
• 如果是自定义组件，直接=$event