vue之表单输入绑定

目录

基础用法

 v-model 本质 理解

选择的基础使用

 修饰符的使用

.lazy

 .number

.trim


基础用法

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

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

注意点:

v-model 会忽略所有表单元素的 valuecheckedselected 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>

 

 

### Vue 表单输入数据绑定方法 在 Vue.js 中,`v-model` 是用于表单控件和应用状态之间创建双向数据绑定的核心指令[^1]。当用户通过表单交互时,Vue 实例中的对应数据会自动同步更新;同样地,如果更改了 Vue 实例的数据表单元素的状态也会相应改变。 #### 文本绑定 对于简单的文本输入,可以通过 `v-model` 将其值绑定Vue 实例的一个属性上: ```html <div id="app"> <input type="text" v-model="message" placeholder="请输入内容"> <p>您输入的内容是: {{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '' } }); </script> ``` 上述代码展示了如何利用 `v-model` 绑定一个文本Vue 的实例变量 `message` 上。每当用户修改输入内的文字时,`message` 值都会实时更新并反映在页面上的 `<p>` 标签中。 #### 复选 (Checkbox) 和 单选按钮 (Radio) 复选通常用来表示多个可选项的选择情况,而单选按钮则是从一组互斥选项中选取唯一的一项。两者的 `v-model` 使用方式有所不同: - **复选**: 如果有多个复选,则它们共享同一个数组类型的模型值。 ```html <div id="app"> <label><input type="checkbox" value="JavaScript" v-model="languages"> JavaScript</label> <label><input type="checkbox" value="Python" v-model="languages"> Python</label> <label><input type="checkbox" value="C++" v-model="languages"> C++</label> <br/> 您选择了: {{ languages }} </div> <script> new Vue({ el: '#app', data: { languages: [] } }); </script> ``` 这里定义了一个名为 `languages` 的数组来存储被勾选的语言名称列表[^2]。 - **单选按钮**: 对于单选按钮组来说,所有的成员都应具有相同的 `name` 属性以及不同的 `value` 值,并且这些按钮共用一个字符串形式的模型值。 ```html <div id="app"> <label><input type="radio" name="language" value="JavaScript" v-model="picked"> JavaScript</label> <label><input type="radio" name="language" value="Python" v-model="picked"> Python</label> <label><input type="radio" name="language" value="C++" v-model="picked"> C++</label> <br/> 您选择的是: {{ picked }} </div> <script> new Vue({ el: '#app', data: { picked: 'JavaScript' } }); </script> ``` 在这个例子中,无论哪个单选按钮被点击,`picked` 都会被设置成该按钮关联的值。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

新生代农民工-小王八

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值