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 组件注册
Nov 20 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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模板引擎SMARTY
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
后勤主管工作职责
2013/12/07 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
主管竞聘书范文
2014/03/31 职场文书
校车安全责任书
2014/08/25 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
Spring实现内置监听器
2021/07/09 Java/Android
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js