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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
用户的详细注册和判断
2006/10/09 PHP
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
也谈截取首页新闻 - 范例
2006/10/09 PHP
php 图片上添加透明度渐变的效果
2009/06/29 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python实现与redis交互操作详解
2020/04/21 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
C#中的验证控件有几种
2014/03/08 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
入党介绍人意见2015
2015/06/01 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python