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 18 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
关于Vue中的options选项
Mar 22 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中explode函数用法分析
2014/11/15 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
浅析javascript中function 的 length 属性
2014/05/27 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
pandas数值计算与排序方法
2018/04/12 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
实习单位推荐信范文
2013/11/27 职场文书
生产总经理岗位职责
2013/12/19 职场文书
财产公证书样本
2014/04/04 职场文书
自主招生推荐信范文
2014/05/10 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android
GO中sync包自由控制并发示例详解
2022/08/05 Golang