vue系统,class动态传入

94 阅读1分钟

在实际开发过程中,会遇到页面的样式,需根据不同的场景,进行切换。

对于这个切换,有人会写 if渲染不同的template,还可以使用变量,控制class的值。 举个例子,变量名带数字,需要动态计算,再返回

ff92f5d0176cb2c3e45c790e8755d0e.png

具体写法如下 lax_preset_scaleIn:3800:0整个定义成一个变量 posCls

该div样式调整为:class="['fourteen lax', posCls]"

posCls需要计算

computed: {
  posCls() {
    const num = 3800
    return 'lax_preset_scaleIn:' + num + ':0'
  }
}

computed只是一个方式,也可以换成其他方式去触发,本质都是改变量的值。