vue中style 使用 calc

宇宙无敌最坚固铁桶僵尸

已于 2023-04-25 18:27:47 修改

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端 css

于 2023-04-25 18:27:23 首次发布

本文链接：https://blog.csdn.net/coderDouble/article/details/130371174

版权

该文章展示了在Vue组件中如何使用计算属性`computed`和方法`methods`来动态设置元素的最小高度(`minHeight`)和内边距(`padding`)。计算属性`calcMinHeight`用于返回一个对象，包含CSS的`minHeight`和`padding`值，而方法`calcMinHeight`则根据变量`heightValue`和`num`来计算`minHeight`。

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

<template>
   <div :style="calcMinHeght">使用计算属性</div>
   <div :style="calcMinHeght()">使用方法</div>
</template>
<script>
export default {
  computed: {
    calcMinHeght(){
      return {minHeight: `calc(100vh - 208px)`, padding: `0 120px`}
    },
  },
  methods: {
    calcMinHeght() {
      let heightValue = "100px";
      let num = 1;
      return { minHeight: `calc(${heightValue} / ${num} - 150px)` };
    },
  }
}
</script>