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

寻技术 Html/CSS / VUE 2023年07月11日 99

vue不提供 transfrom:scale(1.5) ; 会报错 ,错误是  "TypeError: _vm.scale is not a function"; 

原因:Vue将其误认为scale是函数

解决方法:可以使用模板字符串

<template>
        <div class="wrap" ref="message" :style="scaleFun">      <!--这里注意没有{},不能写成{sss} -->
        <div class="bigPic"></div>
        </div>
</template>

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

 

关闭

用微信“扫一扫”