vue计算属性传参（computed）

计算属性默认是无法传递参数的

主要用于对当前文件组件的数据(data/props)，进行操作，缓存当前计算属性的依赖

而有些情况需要使用到计算属性来传递参数，可以使用闭包函数：

computed: {// 获取数据进行操作computedValue() {return function(val) {console.log(val);};}}

举一个具体例子，项目需要发送文件消息，需要根据文件类型显示文件图标类型，更需要处理文件名称，使用计算属性传参：

页面：

<!-- 文件 文档类型样式 --><div class="typeDoc" :style="{backgroundColor: item.sender == $store.state.userUID?'rgba(2,134,223,0.1)':'rgba(255,255,255,0.5)'}" v-else-if="item.msgType == 'LINK'&& !item.msgcustom"><imgsrc="@/assets/documents/icon-im-doc-zip.png"v-if="item.fileIcon === 'zip'"/><imgsrc="@/assets/documents/icon-im-doc-img.png"v-else-if="item.fileIcon === 'img'"/><imgsrc="@/assets/documents/icon-im-doc-mp4.png"v-else-if="item.fileIcon === 'audio'"/><imgsrc="@/assets/documents/icon-im-doc-pdf.png"v-else-if="item.fileIcon === 'pdf'"/><imgsrc="@/assets/documents/icon-im-doc-ppt.png"v-else-if="item.fileIcon === 'ppt'"/><imgsrc="@/assets/documents/icon-im-doc-txt.png"v-else-if="item.fileIcon === 'txt'"/><imgsrc="@/assets/documents/icon-im-doc-xls.png"v-else-if="item.fileIcon === 'xls'"/><img src="@/assets/documents/icon-im-doc-default.png" v-else /><a class="inner__doc__link" :href="SetLinkFileNameAndPath(item,'path')">{{SetLinkFileNameAndPath(item,'name')}}</a></div>

computed: {SetLinkFileNameAndPath() {// 动态加载文件名称路径及图标return function(item,n) {if(item) {if(n == 'name') {if(item.text.constructor === Object && item.text.constructor !== String) {let indexO = item.text.fileName.lastIndexOf(".");item.fileIcon = this.docIcon(item.text.fileName.slice(indexO + 1));return item.text.fileName;} else if(item.text.constructor === String && item.text.indexOf("{") != -1) {let indexS = JSON.parse(item.text).fileName.lastIndexOf(".");item.fileIcon = this.docIcon(JSON.parse(item.text).fileName.slice(indexS + 1));return JSON.parse(item.text).fileName;} else {let indexP = item.text.split("|")[1].lastIndexOf(".");item.fileIcon = this.docIcon(item.text.split("|")[1].slice(indexP + 1));return item.text.split("|")[1];}} else if(n == 'path') {if(item.text.constructor === Object && item.text.constructor !== String) {return item.text.filePath;} else if(item.text.constructor === String && item.text.indexOf("{") != -1) {return JSON.parse(item.text).filePath;} else {return item.text.split("|")[0];}}}}}
}

methods: {//文档图标docIcon(val) {if (["jpg", "png", "jpeg", "gif", "bmp"].includes(val)) {return "img";} else if (["zip", "rar", "7z", "jar", "cab"].includes(val)) {return "zip";} else if (["ppt", "pptx"].includes(val)) {return "ppt";} else if (["txt", "docx", "doc"].includes(val)) {return "txt";} else if (["pdf"].includes(val)) {return "pdf";} else if (["mp4"].includes(val)) {return "audio";} else if (["xls", "xlsx"].includes(val)) {return "xls";} else {return "default";}},
}

具体的数据操作是可以忽略的，理解具体的使用情景即可。

vue计算属性传参（computed）相关推荐

vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
Vue 计算属性 computed
<!--计算属性:1. 定义:要用的属性不存在,要通过已有的属性计算得来2. 原理:底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get ...
Vue计算属性（computed）和侦听器（watch）
Vue计算属性(computed)和侦听器(watch) 计算属性(computed) 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.所以不 ...
Vue计算属性- computed:{}
七. Vue计算属性计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行 ...
Vue计算属性实现成绩单，Vue计算属性
Vue计算属性实现成绩单代码如下: <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
Vue过滤器的传参使用及案例
Vue过滤器的传参使用及案例过滤器用于一些常见的文本格式化过滤器的第二个参数为可选使用位置过滤器可以用在两个地方:双花括号插值{{ }}和 v-bind 表达式** 使用方法 {{ 变量 | ...
Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）
目录计算属性(面试) 1.计算属性简介 2.计算属性和方法的区别:(面试) 3.关于计算属性函数什么情况下调用 4.案例:购物车页面计算总价计算属性(面试) 1.计算属性简介把c ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...

vue计算属性传参（computed）

vue计算属性传参（computed）相关推荐

最新文章

热门文章