vue中style 使用 calc

原创已于 2023-04-25 18:27:47 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #css

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

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

<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>