vue强制绑定css的缩放效果transfrom:scale()

START

• 当想和普通的样式(比如宽高啊)一样，使用变量控制元素样式的时候，发现绑定缩放会报错，报错如下

用法错误的代码.png 用法错误的报错截图.png

正确用法

正确用法的代码

<template>
  <div class="demo4">
    <div class="item" :style="scaleFun"></div> <!--这里注意和原本style绑定不同，没有{},不能写成 :style="{scaleFun}"-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 0.5,
    };
  },
  computed: {
    scaleFun: function () {
      var scale = this.scale;
      return `transform:scale(${scale})`;
    },
  },
};
</script>

<style scoped>
.demo4 {
  width: 100%;
  height: 100%;
}
.item {
  width: 400px;
  height: 600px;
  background-color: pink;
}
</style>

正确使用的效果：

正确使用的效果.png