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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vuex的使用步骤
Jan 06 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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&mysql(二)
2006/10/09 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
家具促销活动方案
2014/02/16 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
cf收人广告词
2014/03/14 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
大学生村官个人总结
2015/02/15 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Golang全局变量加锁的问题解决
2021/05/08 Golang