Vue中v-mdoel

Vue中v-mdoel

@[toc]

一、表单输入绑定 v-model 的原理

<script>
    export default {
   
        data(){
   
            return{
   
                msg:'Hello world",
                checked:'',
                fruits:[],
                sex:"男",
                city:''
            };
        },
        methods:{
   
            changeValue(e){
   
                console.log(e);
                this.msg = target.value
            }
        }
    }
</script>

<template>
    <div>
    // 1、input 框
        <input type = "text" v-model="msg">
        <h2>{
   {
   msg}}</h2>
        <input type = "text" :value="msg" @input="changeValue">

    // 2、单个勾选框，v-model 为布尔值
    <input type="checkbox" v-model="checked">
    <h2>{
   {
   checked}}</h2>

    // 3、多个勾选框
    <input type="checkbox" v-model="fruits" value="苹果">苹果
    <input type="checkbox" v-model="fruits" value="梨子">梨子
    <input type="checkbox" v-model="fruits" value="荔枝">荔枝
    <input type="checkbox" v-model="fruits" value="西瓜">西瓜
    <input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜
    <h2>喜欢的水果:{
   {
   fruits}}/h2>
    <!--4、单选框-->
    <input type="radio" v-model="sex" value="男">男
    <input type="radio" v-model="sex" value="女">女
    <h2>{
   {
   sex}]/h2>
    <-- 选项框-->
    < --单选-->
    <select name="" id="" v-model="city">
        <option value="张家界">张家界</option>
        <option value="长沙">长沙</option>
        <option value="益阳">益阳</option>
        <option value="邵阳">邵阳</option><
    /select>
    <h2>{
   {
   city}</h2>

    </div>
</template>

v-model 的原理，本质是两个操作：

1. v-bind 绑定一个value属性
2. v-on 给当前元素添加一个 input 事件

   二、v-model 表单控件的基本使用

   1、input 框

   ```js

### 2、单个勾选框，v-model 为布尔值
```js
<script>
    export default {
        data(){
            return{
                checked:'',
                fruits:[],
                sex:"男",
                city:''
            };
        },
    }
</script>

<template>
    <div>    
    // 2、单个勾选框，v-model 为布尔值
    <input type="checkbox" v-model="checked">
    <h2>{
  {checked}}</h2>
    </div>
</template>

3、多个勾选框

<script>
    export default {
   
        data(){
   
            return{
   
                fruits:[],
            };
        },
    }
</script>

<template>
    <div>
    // 3、多个勾选框
    <input type="checkbox" v-model="fruits" value="苹果">苹果
    <input type="checkbox" v-model="fruits" value="梨子">梨子
    <input type="checkbox" v-model="fruits" value="荔枝">荔枝
    <input type="checkbox" v-model="fruits" value="西瓜">西瓜
    <input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜
    <h2>喜欢的水果:{
   {
   fruits}}/h2>
    </div>
</template>

4、单选按钮

<script>
    export default {
   
        data(){
   
            return{
   
                sex:"男",
            };
        },
    }
</script>

<template>
    <div>
        <!--4、单选框-->
        <input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
        <h2>{
   {
   sex}]/h2>
    </div>
</template>

5、选项框——单选

<script>
    export default {
   
        data(){
   
            return{
   
                city:''
            };
        },
    }
</script>

<template>
    <div>
    <-- 选项框-->
    < --单选-->
    <select name="" id="" v-model="city">
        <option value="张家界">张家界</option>
        <option value="长沙">长沙</option>
        <option value="益阳">益阳</option>
        <option value="邵阳">邵阳</option><
    /select>
    <h2>{
   {
   city}</h2>
    </div>
</template>

三、v-model 修饰符的使用

1、.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
即当输入框失去焦点，再去同步输入框中的数据

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />

2、 .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
即将输入框的内容自动转为数字类型

<input v-model.number="age" type="text" />

当输入类型为 text 时这通常很有用。如果输入类型是 number，Vue 能够自动将原始字符串转换为数字，无需为 v-model 添加 .number 修饰符。如果这个值无法被 parseFloat() 解析，则返回原始的值。

3、.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
即 自动过滤用户输入的首尾空白字符

<input type="text" v-model.trim="msg"  />