v-model的进阶用法

Nikki_u

已于 2022-04-07 16:44:30 修改

阅读量932

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2022-04-07 14:54:34 首次发布

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/124016534

本文深入探讨了Vue.js中v-model的使用，从基本的v-bind和v-on指令结合，到高级的拆分、合并及.sync修饰符的用法，揭示了v-model在前端开发中的灵活性和强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、v-model包含哪两个指令 v-bind v-on

2、合并用法

  <!-- 合并写法 -->
  <input type="text" v-model="name">

3、拆分写法

  <br>
<input type="text" 
:value="message"
@input="message=$event.target.value"
>
<input 
type="checkbox"
:checked='myChecked' 
@change="myChecked=$event.target.checked"
>

message: this.name,
myChecked:true

4、高级用法

<UpdateName  v-model="user.name"  @close='isShowUpdateName=false'></UpdateName>

model:{
  prop:'name',//value=>name(数据名)
  event:'on-success',//input=>事件名
},

5、拆分写法

<UpdateName  
:name="user.name" 
@update:name='user.name=$event' 
@close='isShowUpdateName=false'
></UpdateName>

this.$emit("update:name", this.message);//子组件

6、.sync用法

<UpdateName  
:name.sync="user.name"  
@close='isShowUpdateName=false'
></UpdateName>

this.$emit("update:name", this.message);//子组件