VUE3 setup语法糖绑定style变量改变属性值

主要解决动态绑定style样式 变量如何赋值问题

<template>
<div class="test_style" :style="{backgroundPosition:Postion }">
</div>
</template>
<script setup lang="ts">
let level = 10;
let Postion:string = '0px ' + level * -28 +'px';
</script>

<style lang="scss" scoped>
  .test_style{
                width:96px;
                height:28px;
                background:url('../assets/xxx.png');
             }
</style>

1.先在div class样式里面插入图片资源 

2.width height是图片所要展示的大小 即要截取出来的部分大小

3.background引入实际图片地址

4. :style绑定的要截图图片位置信息

直接往：style里面填充变量做计算是不生效的 被识别为字符串。 所要我们就在脚本里面先把值计算好转换成字符串在做填充就可以实现了。