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


Posted in Vue.js onJune 05, 2022

data里面的数据相互使用

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

vue中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里的数据不能相互引用问题

如下图所示

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

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。


Tags in this post...

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
You might like
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php实现word转html的方法
2016/01/22 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
javascript基础知识讲解
2017/01/11 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
Angularjs实现上传图片预览功能
2017/09/01 Javascript
浅谈React高阶组件
2018/03/28 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
详解React 条件渲染
2020/07/08 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python实现复制整个目录的方法
2015/05/12 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
如何写好活动总结
2019/06/21 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
python实现网络五子棋
2021/04/11 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python