表单与v-model

表单输入绑定看vue文档介绍

• 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

1.单行文本

• 在template里插入表单
• 在data声明message

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me" />
    <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'hi',
    };
  },
  components: {},
};
</script>

• 用户可以页面更改message值
• 通过内存改message值，添加click事件,👇

2.多行文本textarea

• 只需要把input标签改成textarea

3. 单个复选框

4. 多个复选框

5. 多个复选框单选radio

• x就不是数组改为字符串''
• checkbox改为radio

6. 选择框-单选<select>

7. 选择框-多选

• 添加multiple
• 如何选择Ctrl+点击 Shift+点击
• x为数组

x:[]

form表单

<template>
  <div id="app">
    登陆
    <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: '',
      },
    };
  },
  methods: {
    onSubmit() {
      console.log(this.user);
    },
  },
  components: {},
};
</script>

v-model修饰符 .lazy

• 在你移出input事件之后显示

.number

• 将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

.trim

• 过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

自定义组件v-model

• v-model本质

当你在写v-model 的时候，相当于在写两件事情
1. 绑定value 等于这个事件
2. 监听这个组件的事件,获取它的值

:value="user.username" @input="user.username = $event.target.value"

• 这里如果是.sync的话，后面就可以直接$event

---

• value input 组合

<template>
  <div>
    <input :value="value" @click="onInput" />
  </div>
</template>
<script>
export default {
  name: 'MyInput',
  props: {
    value: {
      type: String,
    },
  },
  methods: {
    oninput(e) {
      const event = e.target.value;
      this.$emit('input', value);
    },
  },
};
</script>