vue强制绑定css的缩放效果transfrom:scale()
2020-11-24 本文已影响0人
lazy_tomato
START
- 当想和普通的样式(比如宽高啊)一样,使用变量控制元素样式的时候,发现绑定缩放会报错,报错如下
正确用法
正确用法的代码
<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>