表单与v-model

v-model有什么用

可以在表单<input> 、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

尽管如此，但v-model实际上是个语法糖，即v-bing 和 v-on:input 的语法糖。等价写法如下：

<template>
    <div id="app">
        <input  type="text"
                :value="user.name"
                @input="user.name = $event.target.value">
    </div>
</template>

其中，:value="user.name" @input="user.name = $event.target.value"> 可以简写成 v-model='user.name'

input组件事例

如：

MyInput.vue

<template>
    <div class="wrapper">
        <input  type="text"
                :value="value" @input="onInput">
    </div>
</template>
<script>
    export default {
        name: 'MyInput',
        props: {
            value: {
                type: String,
            }
        },
        methods: {
            onInput(e){
                const value = e.target.value;
                this.$emit('input', value)
            }
        }
    }
</script>
<style>
.wrapper {
    border: 1px solid red;
    display: inline-block;
}
</style>

使用MyInput.vue组件

<template>
  <div id="app">
    <form>
        用户名：{{user.name}},
        密码：{{user.password}}
        <label>
            <span>用户名</span>
            <MyInput v-model="user.name"/>
            <MyInput :value="user.name" @input="user.name = $event"/>
        </label>
        <label>
            <span>密码</span>
            <input type="password" v-model='user.password'>
        </label>
    </form>
  </div>
</template>
<script>
import MyInput from "@/MyInput";
export default {
    components: {
        MyInput
    },
    name: 'App',
    data(){
        return {
            user: {
                name: '',
                password: ''
            }
        }
    }
}
</script>

表单用法

表单总共有：

• input
• textarea
• checkbox
• radio
• select
• from

input输入框（双向绑定）

如：

<template>
    <div id="app">
        <input v-model="message">
        <p>Message is: {{message}}</p>
        <p>
            <button @click="message = 'ddb'">
                set message to ddb
            </button>
        </p>
    </div>
</template>
<script>
export default {
    name: 'App',
    data(){
        return {
            message: 'hi'
        }
    }
}
</script>

说明：message先是显示hi，点击按钮后将‘ddb’赋值给message，修改页面上input内的内容，组件中的message属性值跟着变化，修改组件中的message属性值，页面上的内容跟着变化，这就是一个简单的双向绑定。

textarea多行文本

将input标签改为textarea，用法和input一样

checkbox复选框

单个复选框绑定到布尔值

点击后x值为false

<template>
  <div id="app">
    <label>
      <input type="checkbox" v-model="x" />
      <span> x: {{ x }}</span>
    </label>
    <label>
      <input type="checkbox" v-model="y" />
      <span> y: {{ y }}</span>
    </label>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      x: "true",
      y: "false",
    };
  },
};
</script>

多个复选框绑定同一个数组

value的值会增加到数组x中

<template>
  <div id="app">
    <div>爱好：{{x}}</div>
    <label>
      <input type="checkbox" v-model="x" value="抽烟"/>
      <span>抽烟</span>
    </label>
    <label>
      <input type="checkbox" v-model="x" value="喝酒"/>
      <span>喝酒</span>
    </label>
    <label>
      <input type="checkbox" v-model="x" value="烫头"/>
      <span>烫头</span>
    </label>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
        x: []
    };
  },
};
</script>

radio单选按钮

input的type属性radio，x的值为空，最好加上name属性，表示3个是一组的

<template>
  <div id="app">
    <div>我想做：{{x}}</div>
    <label>
      <input type="radio" name="aihc" v-model="x" value="抽烟"/>
      <span>抽烟</span>
    </label>
    <label>
      <input type="radio" name="aihc" v-model="x" value="喝酒"/>
      <span>喝酒</span>
    </label>
    <label>
      <input type="radio" name="aihc" v-model="x" value="烫头"/>
      <span>烫头</span>
    </label>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
        x: ''
    };
  },
};
</script>

select选择框

<template>
  <div id="app">
    <select v-model="x">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{x}}</span>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      x: "",
    };
  },
};
</script>

from提交元素

<template>
  <div id="app">
    <form v-on:submit.prevent="onSubmit">
      <label>
        <span>用户名</span>
        <input type="text" v-model="user.name" />
      </label>
      <label>
        <span>密码</span>
        <input type="text" v-model="user.password" />
      </label>
      <button>登录</button>
    </form>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        name: "",
        password: "",
      },
    };
  },
  methods: {
    onSubmit() {
      const {
        user: { name, password },
      } = this;
      console.log(name, password);
    },
  },
};
</script>

说明：用户名和密码的输入框输入的内容存到data.user 对象中，监听form标签的submit事件，点击登录按钮会触发form标签的submit事件，submit默认刷新事件被阻止了，执行onSubmit函数，打印出用户名和密码。

修饰符

v-model的修饰符有：

• .lazy
• .number
• .trim

.lazy

v-model监听input事件，当页面上的输入框中的内容修改的时候，内存中对应的数据也马上修改了，.lazy 可以让内存中对应的数据在移出input输入框的时候才修改，就变成了监听change事件。

说明：

• input事件，键盘鼠标任何输入设备都会触发事件。
• change事件，只在input失去焦点时触发。

.number

只会取到input内容的数字部分

.trim

去除首尾的空白字符