vue之表单输入绑定

目录

基础用法

 v-model 本质 理解

选择的基础使用

 修饰符的使用

.lazy

 .number

.trim

---

基础用法

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

注意点:

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

简单使用

<script>
export default{
data(){
  return{
    msg: "hello World"
  }
}
}
</script>
 
<template>
<div>
  <!-- v-model 基本使用 -->
  <input type="text" v-model="msg">
  <h1>{{msg}}</h1>
</div>
</template>
<style>
</style>

 v-model 本质 理解

对于v-model 我们可以理解为俩个操作组成

1.v-bind 绑定一个value属性

2.v-on给当前元素添加一个input事件

代码:

<script>
export default{
data(){
  return{
    msg: "hello World"
  }
},
methods:{
  change(event){
   console.log("获取事件")
   console.log(event)
   //获取事件中target的value 就是输入框改变的值 进行赋值
   this.msg=event.target.value
  }
}
}
</script>
 
<template>
<div>
  <!-- v-model 基本使用 -->
  <input type="text" v-model="msg">
  <h1>{{msg}}</h1>
<!-- 本质 -->
  <input type="text" :value="msg" @input="change($event)">
</div>
</template>
<style>
</style>

 

 

选择的基础使用

注意:

有时我们可能想把值绑定到当前活动实例的一个动态 property 上，这时可以用 v-bind 实现，此外，使用 v-bind 可以将输入值绑定到非字符串

代码:

<script>
export default{
data(){
  return{
    msg: "",
    like:[],
    sex:"",
    city:"",
    cities:[],
    value:"南昌"
  }
}
}
</script>
<template>
<!--  复选框 -->
<!-- 单个勾选 v-model为布尔值 --> -->
<input type="checkbox" v-model="msg"/>
<h3>{{msg}}</h3>
<br/>
<!-- 勾选多个选项 数组形式 value进行数值绑定-->
<input type="checkbox" v-model="like" value="吃饭"/>吃饭
<input type="checkbox" v-model="like" value="睡觉"/>睡觉
<input type="checkbox" v-model="like" value="玩游戏"/>玩游戏
<h4>{{like}}</h4>
<br/>
<!-- 单选框 value 进行数值绑定 不需要name-->
<input type="radio" v-model="sex" value="男"/>男
<input type="radio" v-model="sex" value="女" />女
<h3>{{sex}}</h3>
<br/>
<!-- 选择框 都是通过value 进行数值绑定-->
<!-- 单选 -->
<select name="" id="" v-model="city">
  <option value="南昌">南昌</option>
  <option value="长沙">长沙</option>
  <option value="萍乡">萍乡</option>
  <option value="武汉">武汉</option>
</select>
<h2>{{city}}</h2>
<br>
<!-- 单选 -->
<!--有时我们可能想把值绑定到当前活动实例的一个动态 property 上，这时可以用 v-bind 实现，此外，使用 v-bind 可以将输入值绑定到非字符串  -->
<select name="" id="" v-model="cities" multiple>
  <option :value="value">南昌</option>
  <option value="长沙">长沙</option>
  <option value="萍乡">萍乡</option>
  <option value="武汉">武汉</option>
</select>
<h2>{{cities}}</h2>
</template>
<style>
</style>

 

 修饰符的使用

.lazy

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

代码:

<script>
export default{
data(){
  return{
    msg: "hello world"
  }
}
}
</script>
<template>
<input type="text" v-model="msg"/>
<h3>{{msg}}</h3>
</template>
<style>
</style>

 

使用.lazy

<!-- 修饰符使用 -->
<!-- .lazy 当输入框失去焦点,再去同步输入框中的数据 -->
<input type="text" v-model.lazy="msg"/>
<h3>{{msg}}</h3>

 

 

 .number

自动将用户的输入值转为数值类型

代码:

<script>
export default{
data(){
  return{
    msg: 0
  }
}
}
</script>
<template>
<!-- 修饰符使用 -->
<!-- .number 将输入的内容自动转为数字 -->
<input type="text" v-model.number="msg"/>
<h3>{{typeof msg}}</h3>
</template>
<style>
</style>

 

 

.trim

自动过滤用户输入的首尾空白字符

代码:

<script>
export default{
data(){
  return{
    msg: "hello world"
  }
},
methods:{
  downMsg(){
    console.log(this.msg)
  }
}
}
</script>
<template>
<input type="text" v-model="msg" @keydown="downMsg"/>
<h2>{{msg}}</h2>
</template>
<style>
</style>

 使用.trim

<!-- 修饰符使用 -->
<!-- .trim 自动过滤用户输入的首尾空白字符 -->
<input type="text" v-model.trim="msg" @keydown="downMsg"/>
<h2>{{msg}}</h2>