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

ly_Enhs

于 2022-12-16 10:01:44 发布

阅读量1.5k

点赞数

文章标签：前端 css html typescript vscode

本文链接：https://blog.csdn.net/u012415226/article/details/128338600

版权

本文介绍在Vue项目中如何通过计算属性动态设置元素背景图片的位置。具体实践包括使用`:style`绑定计算得出的字符串值，确保背景图片按需求正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要解决动态绑定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里面填充变量做计算是不生效的被识别为字符串。所要我们就在脚本里面先把值计算好转换成字符串在做填充就可以实现了。