像transfrom中有多个属性值的样式,例如:translateX(),如果按照正常的vue写法
:style="{color: acticeColor}"
的话,vue会报错的,所以寻找了解决方法
原因:vue误以为translateX是一个函数
解决方法:使用模板字符串
<template>
<div clasa="r-sort" :style="scaleFun"></div> <!--这里注意没有{},不能写成{sss} -->
</template>
<script>
export default{
data(){
return{
// 移动的距离
scale: -159,
// 当前轮播元素
arrentIndex: 0
}
},
computed: {
scaleFun() {
var scale = this.scale
var arrentIndex = this.arrentIndex
return `transform:translateX(${scale * arrentIndex + 'px'})`
}
}
}
</script>
computed:对于任何复杂逻辑,你都应当使用计算属性。
原文参照:https://www.cnblogs.com/renzm0318/p/9208696.html