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 el-upload上传文件的示例代码
Dec 21 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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 JSON 数据解析代码
2010/05/26 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
jsTree使用记录实例
2016/12/01 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python爬虫使用cookie登录详解
2017/12/27 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python实现事件驱动
2018/11/21 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python循环结构的应用场景详解
2019/07/11 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
建筑系毕业生自我鉴定
2014/01/24 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
农村门前三包责任书
2014/07/25 职场文书
公司离职证明样本
2014/09/13 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
python如何做代码性能分析
2021/04/26 Python