Vue中 v-model在表单中的使用详解

在vue中,作者提供了很多方便的指令便于开发者使用,其中v-model–数据双向绑定在vue的开发中算是最为常用的一个指令.

v-model的基本使用

1. 文本框中

//html  v-model="value"实现双向绑定
<input type="text" v-model="value" />
<p>{{ value }}</p>

//js  在data中声明一个value变量
data() {
    return {
      value: "",
    };
  },

代码效果:

2. 文本域中

//heml
//white-space: pre-line"  强制换行
<p style="white-space: pre-line">{{ value }}</p>
<br />
<textarea v-model="value"></textarea>

//js
data() {
    return {
      value: "",
    };
  },

代码效果:

4. 复选框

//html
<input type="checkbox" id="checkbox" v-model="value" />
<label for="checkbox">{{ value }}</label>

代码效果:

多个复选框还可绑定一个数组

<input type="checkbox" id="jack" value="Jack" v-model="arr" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="arr" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="arr" />
<label for="mike">Mike</label>
<br />
<span>Checked names: {{ arr }}</span>

代码效果:

6. 单选框

<input type="radio" id="one" value="One" v-model="value" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="value" />
<label for="two">Two</label>
<br />
<span>{{ value }}</span>

代码效果:

7. 选择框

<select v-model="value">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>{{ value }}</span>

代码效果:
多选绑定数组:

//multiple属性即可启用多选
<select v-model="arr" multiple style="width: 50px">
      <option>A</option>
      <option>B</option>
      <option>C</option>
</select><br />
<span>{{ arr }}</span>

代码效果:

v-model的值绑定

上效果就明白他的用法

1. 复选框

 <input type="text" v-model="value" />
<input type="checkbox" v-model="value" true-value="yes" false-value="no" />

代码效果:

2. 单选框.

<input type="text" v-model="value" />
<input type="radio" v-model="value" value="a" />

代码效果:

4. 选择框

<input type="text" v-model="value" />
<p>{{ value.number }}</p>
<select v-model="value">
      <!-- 内联对象字面量 -->
      <option v-bind:value="{ number: 123 }">123</option>
      <option v-bind:value="{ number: 456 }">456</option>
      <option v-bind:value="{ number: 789 }">789</option>
 </select>

此时value绑定的是一个对象,多以想要获取必须使用对象的点语法
代码效果:

当选中时 typeof vm.value => ‘object’
vm.value.number => 123

v-model 修饰符

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

<input type="text" v-model.lazy="value" />
<input type="radio" v-model="value" value="a" />

代码效果:

input与change事件区别说明

1.input，input事件在input或文本框输入值发生变化的时候触发。
2.change事件是在input或文本框失焦时触发
input不会触发下拉框改变

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

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

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值

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

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

这个与原生js中的trim()方法是同样效果的

总结

上述虽然文字不多,但代码配效果图应该是通俗易懂了,具体原理与方法可参考官方文档