v-model的进阶用法

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

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=>事件名
},

 

你可以在`<van-sidebar>`标签上添加`@change`事件监听器来实现索引切换时更新右侧布局的功能。具体实现如下: 1. 在`data`中定义需要切换的数据,以及当前选中的索引值: ```javascript data() { return { activeKey: 0, // 当前选中的索引值 racketList: [ // 不同索引对应的数据 { id: 1, name: '新手球拍', desc: '适合初学者使用的球拍' }, { id: 2, name: '进阶球拍', desc: '适合有一定基础的球员使用的球拍' }, { id: 3, name: '高级球拍', desc: '适合专业球员使用的球拍' } ], currentRacket: {} // 当前选中的球拍数据 } } ``` 2. 在模板中,使用`<van-sidebar-item>`标签渲染侧边栏,并绑定`activeKey`作为选中的索引值: ```html <van-sidebar v-model="activeKey" fixed="false"> <van-sidebar-item title="新手球拍" /> <van-sidebar-item title="进阶球拍" /> <van-sidebar-item title="高级球拍" /> </van-sidebar> ``` 3. 在模板中,使用`<van-card>`标签渲染右侧的布局,并根据当前选中的索引值显示对应的数据: ```html <van-card> <div class="card-content">{{ currentRacket.name }}</div> <div class="card-content">{{ currentRacket.desc }}</div> </van-card> ``` 4. 在`<script>`标签中,定义`onChange`方法来更新选中的索引值,并根据索引值更新右侧的数据: ```javascript methods: { onChange(index) { this.activeKey = index; // 更新选中的索引值 this.currentRacket = this.racketList[index]; // 更新右侧的数据 } } ``` 5. 在`<van-sidebar>`标签上添加`@change`事件监听器,将事件绑定到`onChange`方法上: ```html <van-sidebar v-model="activeKey" fixed="false" @change="onChange"> <van-sidebar-item title="新手球拍" /> <van-sidebar-item title="进阶球拍" /> <van-sidebar-item title="高级球拍" /> </van-sidebar> ``` 这样,当用户点击侧边栏的不同项时,就会触发`@change`事件,从而更新选中的索引值和右侧的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值