挖坑指南:如何通过事件动态地切换iView的Tabs(v-bind与v-model的区别)

前言

iView的官方文档算是很详细的了,但是如果我们没有一定的编程经验,看文档也是一件令人困惑的事情。

Tabs官方文档:http://v2.iviewui.com/components/tabs#API

开始

先来看看项目的需求

项目需求

看看官方文档为我们提供的接口

接口 有了这些基本就可以开始啦~

实践

页面结构

页面 为Tabs绑定了事件指定了value。可以实现动态切换。

页面事件

js

代码并没有按照预期生效,当为添加基本信息时,还是停留在详细信息tab页。

那会是什么问题呢?又改如何解决呢?

解决

综上,用户主动切换tab时,value的绑定其实已经失效了,在Tabs组件内部已经同步更新为当前用户点击的值了,只是我们没有使用v-model实现双向的数据绑定。

既然都这样说了,那就试一试v-model的效果吧

页面结构

v-model

页面事件

js

效果

效果

总结  

:value绑定只是v-bind单向的数据绑定,当用户手动切换时,组件内部修改了对应的值,但是呢,data中的值并没有变化;v-model的绑定是双向的,组件内部的值变化了,也会同步到页面的data中。

那种情况更适合你的需求,就采用哪种。没有最好,只有更合适~

你有什么想法和思考可以在下方留言评论,大家一起谈论技术,一起成长,感谢~或者扫描下方二维码,与我取得联系~  (记得备注:CSND喔~)

猜你喜欢

转载自blog.csdn.net/weixin_39015132/article/details/83685349