vue3前端开发-小兔鲜项目-二级页面的tab切换后动态调用!上一次仅仅是做了基础的渲染,这一次,把tab切换后的动态参数调用做一下。


1:其实很简单。因为官方框架提供了原生的动态绑定和动态监听函数。

如下图所示:

vue3前端开发-小兔鲜项目-二级页面的tab切换后动态调用-LMLPHP

如图,我们给这个el-tabs标签呢,绑定了一个动态数据对象,就是我们上面的那个reqData的参数。sortFiled.这就实现了动态切换参数的值的效果了。

然后我们使用了原生的监听函数。tab-change.。这个也是框架自带的监听函数。

我们来一个自定义的,回调函数就行了。把之前那个获取基础数据的方法再次执行一下就行了。

需要提醒大家的是,为了方便看见第一页内容,我们提前把reqData.value.page。初始化为1.然后再去执行请求。


vue3前端开发-小兔鲜项目-二级页面的tab切换后动态调用-LMLPHP

如图,我们做了一个简单的控制台打印。可以看见,鼠标点击切换了,会实时捕捉到,内容。

页面内容显示没有变化,是远程服务器接口反馈的数据问题(远端服务器没有更改内容,所以我们看见的还是一样的,没有发生变化。这不是我们vue3的错误)。

可能是服务器远程接口工作人员偷懒了。不想写那么多差异化的数据了就懒省事了吧。

你想看见数据渲染变化,可以自己去设计开发一套远程接口服务器的内容。

07-22 20:32