vue里用v-for循环出来的图片在:style重新赋值backgroundPosition的值




上面这个图片循环出来后关于计算定位的问题,每循环出来一个图片我就要通过下标值就要给(backgroundPositionX)重新赋予一个没有规律的值,请问这个怎么做

4个回答

你指的没有规律是什么?
:style后面可以跟状态,同样也可以跟计算属性,如果还不够还可以跟方法啊。
比如这样

<template>
    <div v-for="(item, index) in array" :style="getStyle(item, index)"></div>
</template

methods: {
    getStyle(item, index) {
        // 根据item或者index算出你要position的值
        return 'background-position:' + resultValue
    }
}
stopllL
white_g 回复zaidengr: 亲测有效,本来vue早起是有filter这个来做这样的处理的,后来发现和method和computed效果一样。所以抛弃了filter的使用方法,该用computed和methods。如果你的getStyle挂载到了methods里面。那么你的_vm.getStyle()方法就是存在的。vue会把所有的method方法都放在vm上面。就好比你可以直接调用你引用组件的方法一样。顺带一说,你看你的报错信息,说的Property or method “getStyle” is not defined。意思是属性和方法都没有getStyle。显然你的getStyle这个方法就没定义。 在顺带一提,不是只有事件才可以用方法,别想那么狭隘
接近 2 年之前 回复
zaidengr
zaidengr 请看下面我写的!没有规律是指,css的背景图background-position X Y的值,每当循环出来一个图片时,就要给这个循环出来的图片一个background-position X Y的值
接近 2 年之前 回复

你指的没有规律是什么?
:style后面可以跟状态,同样也可以跟计算属性,如果还不够还可以跟方法啊。
比如这样

methods: {
getStyle(item, index) {
// 根据item或者index算出你要position的值
return 'background-position:' + resultValue
}
}

用jquery加上判断,判断没一个循环出来的图片定义不懂得style。

按照你的方法控制台报错:
Property or method "getStyle" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Error in render: "TypeError: _vm.getStyle is not a function"

这个需求就是页面在加载时候就要循环出来图片,每循环出一个图片,然后主动把item,index传递给:style="getStyle(item, index)",(注意不是点击事件),然后通过计算返回这个图片的 backgroundPosition X Y

zaidengr
zaidengr 回复stopllL: 朋友谢谢了,已经解决了,之前是因为把computed和method都放到data的return里了,所以导致所有的方法都没执行,真是谢谢了,这个函数调用是网上其他人跟我说的,我知道不是一个逻辑,搞得我烦死了
接近 2 年之前 回复
stopllL
white_g 在给你说个你想错的地方。页面加载的时候就要循环出来,不代表在那里用了方法就必须要做事件才会循环。再说事件是怎么写的和这里给你说的怎么写的是有区别的。 事件是@click="clickHandler" 这里是:style="getStyle()" 一个是给的函数体。一个是函数调用,分清楚。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐