Vue 的计算属性中传递参数

更新日期: 2021-06-26阅读: 1.4k标签: 参数

vue 中,计算属性(computed )是从其他响应式属性派生的属性,是用于自动监听响应式属性的变化,从而动态计算返回值。计算属性(computed )通常是一个没有参数的函数。当然如果需要像调用方法一样给计算属性传递参数也是可以的,本文介绍两种向计算属性传参的方法。


1.返回函数

这种方式通过计算属性返回的函数来进行传参,如下代码片段,对于一条未审核通过的记录,审核时间为 0,这是显示 -- :

<template>
    <div id="app">
        <p>
            <label>审核时间:</label>
            <i class="number">
                {{ auditTime(1624314956) }}
            </i>
        </p>
    </div>
</template>

<script>
export default {
  computed: {
    auditTime: () => {
        return (timestamp) => (timestamp > 0 ? convertDate(timestamp) : "--");
    },
  },
};
</script>

上面代码的计算属性 auditTime,返回一个箭头函数,接收参数timestamp为时间戳,函数 convertDate 实现了时间戳时间格式化。


2.filters

可以为组件添加一个过滤器 filters,以便可以在模板中按照想要的方式格式化值。

关于 vue 过滤器,在官方文档中定义如下:

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。
<template>
    <div id="app">
        <p>
            <label>审核时间:</label>
            <i class="number">
                {{ 1624314956 | auditTime("--") }}
            </i>
        </p>
    </div>
</template>

<script>
export default {
    filters: {
        auditTime: (timestamp, defaultValue = "--") =>
            timestamp > 0 ? convertDate(timestamp) : defaultValue,
    },
};
</script>

在上面的片段中,当时间戳为0的时候输出的是 -- ,这个格式是否有种似曾相识的感觉,在《angular管道PIPE介绍》中介绍的管道,方式类似。

 {{ 1621836603 | auditTime("--") }}

上面代码最终显示为:2021-06-22 06:35。

 {{ 0 | auditTime("--") }}

上面代码最终显示为:--。


总结

关于计算属性中传参,当然可以在 methods 中定义相应的方法,两者主要区别是:computed 是可以被缓存的,methods 不能缓存。


链接: https://www.fly63.com/article/detial/10468

用js获取url地址协议,参数,端口号,锚点等方法总汇

在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

URLSearchParams_js中快速构造和获取URL查询参数的方法

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。

js通过arguments来获取指定参数

通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步

如何给外部引用的js文件传递参数

给外部引用的js文件传递参数的4种方式:定义全局变量、在src后面传参、检索js文件(js文件要最后引入)、设置其他属性

jquery ajax error函数和及其参数详细说明

一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。

vue-router动态路由设置参数可选

在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面,传page和id,根据page不同,显示不同的页面

掌握JS函数中的几种参数形式

函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。

你需要了解的前后端传参

前后端传参一般有两种形式:key=value 形式传参(即 parameter 形式);body 形式传参(传 json 数据给后端),如果使用的是 GET 请求,浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数,这就是 key=value 形式传参

Less参数混合

* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!