Vue computed带参数

一般情况下，我们在Vue中使用computed计算属性是无法直接进行传参的。

方法：如果有传参数的需求可以通过闭包函数（也叫匿名函数）来实现。

例如需要通过数据的大小，动态改变div的宽度

 <div v-for="(item, index) in mydata" :key="index"><span :style="barWidth(item)"></span></div>

<script>
export default {data(){retrun {mydata:[110,120,130,140,150,160,170,180,190,1100]}}computed: {barWidth() {return function (item) {           //主要思想是通过此处的闭包来实现const style = {};style.height = item + 'px';return style;};},},
}
</script>

如果是在template中使用，同理

 <div>Computed some message: {{ myComputed('55555') }}</div>

computed: {myComputed: function () {return (parameter)=>{return  this.message + '666666'} }},

Vue computed带参数相关推荐

Vue computed 带参数
在使用计算属性的时候,有时需要带参数.正确的写法如下: ...computed:{test: function () {return a=>{return this.attr1+ ' ' + a ...
vue之computed带参数如何接收
<template><div>{{count(1)}}</div> </template><script>export default {c ...
vue @input带参数_Vue 全家桶开发的一些小技巧和注意事项
前言用 vue 全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家.以下内容基于最新版的 vue + vuex + vue-router + axios + ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
Vue跳转页面传值（带参数）
Vue跳转页面传值(带参数) <div><div><input type="text" placeholder="输入关键字搜索" ...
vue路由跳转写法在html,详解vue 路由跳转四种方式 (带参数)
1. router-link 1. 不带参数 //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由 ...
记录实现Vue带参数调转页面
Vue使用携带参数跳转页面使用query传递参数地址栏可见 params传递不可见,类似post 如想用漂亮的可用包裹标签 <router-link :to="{path:'/tes ...
VUE计算属性如何带参数
计算属性主要针对一些简单运算,一般是某个参数的值受到其他一个或者多个参数影响可考虑用计算属性一般个人不建议用过于复杂的运算复杂运算可使用watch监听正常计算属性代码如下带参数的计算属性
vue bus传值（带参数），调用组件之间的方法
1.不带参数的调用创建的时候绑定created () {this.getLeftF();this.$bus.on('getLeftF', this.getLeftF);},销毁beforeDestr ...

Vue computed带参数

Vue computed带参数

Vue computed带参数相关推荐

最新文章

热门文章