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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Array对象方法参考
2006/10/03 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python选择排序算法的实现代码
2013/11/21 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python中退出多层循环的方法
2018/11/27 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
前处理组长岗位职责
2014/03/01 职场文书
文艺晚会主持词
2014/03/24 职场文书
副总经理任命书
2014/06/05 职场文书
医院搬迁方案
2014/06/14 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
导游词之广西漓江
2019/11/02 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs