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




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

你指的没有规律是什么?
: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
    }
}

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

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

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

按照你的方法控制台报错:
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