vue中data里面的数据相互使用方式

 更新时间:2022年06月05日 09:35:18   作者:她超甜i  
这篇文章主要介绍了vue中data里面的数据相互使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

data里面的数据相互使用

今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片:

我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改的话就直接可以改了,太简单),所以就有了这个想法。

在data里面使用,但是肯定不能写成 this.params.topicListType: this.active,这样会报错undefined,从网上查内容基本上都一样,也许是我看不懂,也许是我不会使用别人的,都不能用,我就自己鼓捣一会,他们使用的是mounted,但是我觉得得使用computed

具体代码如下

computed: {
  computedTabsActive() {
    return this.params.topicListType = this.active;
  },
},

这样就可以了,自己亲测有效,在vue中,computed的属性可以被视为是data一样,是可以读取和设值的,所以你可以直接赋值,返回。

但是很重要的一点,必须在模板中使用。摁,在模板中不让看见的话,我想大家都会把,用v-show或者v-if都可以。也算是投机取巧把。

data里的数据不能相互引用问题

如下图所示

如果需要相互引用,需要使用computed

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue如何自定义封装API组件

    vue如何自定义封装API组件

    这篇文章主要介绍了vue如何自定义封装API组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue实现Dialog封装

    Vue实现Dialog封装

    在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单,常用的交互就是把表单以弹窗的形式展示,本文主要介绍了Vue实现Dialog封装,感兴趣的可以了解一下
    2021-07-07
  • vue3 ref和reactive的区别解析

    vue3 ref和reactive的区别解析

    这篇文章主要介绍了在Vue3中,ref用于创建简单数据的响应式包装,通过.value访问和修改;reactive用于创建复杂对象的响应式对象,可以直接访问和修改属性,两者各有适用场景,ref更适合单个值,reactive更适合复杂对象,本文介绍vue3 ref和reactive区别,感兴趣的朋友一起看看吧
    2025-02-02
  • Vue数据双向绑定原理实例解析

    Vue数据双向绑定原理实例解析

    这篇文章主要介绍了Vue数据双向绑定原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Vue中装饰器的使用示例详解

    Vue中装饰器的使用示例详解

    Vue Property Decorator提供了一些装饰器,包括@Prop、@Watch、@Emit、@Inject、@Provide、@Model等等,本文主要来和大家讲讲它们的使用方法,需要的可以参考一下
    2023-07-07
  • Vuex与Vue router的使用详细讲解

    Vuex与Vue router的使用详细讲解

    在看这篇文章的几点要求:需要你先知道Vuex与Vue-Router是个什么东西,用来解决什么问题,以及它的基本使用。如果你还不懂的话,建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章
    2022-11-11
  • 解决ant-design-vue安装报错的问题

    解决ant-design-vue安装报错的问题

    这篇文章主要介绍了解决ant-design-vue安装报错的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    这篇文章主要介绍了vue3 解决getCurrentInstance 打包后线上环境报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • vue项目使用luckyexcel预览excel表格功能(心路历程)

    vue项目使用luckyexcel预览excel表格功能(心路历程)

    这篇文章主要介绍了vue项目使用luckyexcel预览excel表格,我总共尝试了2种方法预览excel,均可实现,还发现一种方法可以实现,需要后端配合,叫做KKfileview,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • Vue项目中常用的工具函数总结

    Vue项目中常用的工具函数总结

    这篇文章主要给大家介绍了关于Vue项目中常用的工具函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09

最新评论