Vue에서 calc를 사용하여 길이를 계산하고 매개 변수를 전달합니다.

1. 정의 및 사용법

calc () 함수는 길이 값을 동적으로 계산하는 데 사용됩니다.

1. 연산자 앞뒤에 공백이 필요합니다. 예 : width : calc (100 % -10px);
2. calc () 함수를 사용하여 모든 길이 값을 계산할 수 있습니다.
3. calc () 함수는 "+", "-", "*", "/"연산을 지원합니다.
4. calc () 함수는 수학 연산에 표준 우선 순위 규칙을 사용합니다.

2. calc를 사용하여 길이를 계산하고 매개 변수를 전달합니다.

요구 사항 :
서버에서 반환 된 배열의 길이에 따라 화면 너비가 변경 될 때 요소의 너비가 계산되고 호환되므로 calc를 사용하여 길이를 계산하고 매개 변수를 전달할 수 있습니다.
2.1 완전한 코드

<template>
  <div>
    <div class="home">
      <div class="test1" v-for="item in resArr" :key="item" :style="div1Width()"></div>
    </div>
    <div class="test2" :style="div2Width()"></div>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      resArr:[1,3,5,7] // 模拟服务端返回数据
    };
  },
  methods: {
    
    
    div1Width(){
    
    
      let arrLength = this.resArr.length;
      return `width: calc((100% - 200px)/${
      
      arrLength});`
    },
    div2Width(){
    
    
      let arrLength = this.resArr.length*100 + 'px';
      return `width: calc(100% - ${
      
      arrLength});`
    },
  }
};
</script>

<style lang="stylus" scoped>
.home{
    
    
  display:flex;
  justify-content: space-around;
  .test1{
    
    
    height:20px;
    background-color: pink;
  }
}
.test2{
    
    
  margin-top:30px;
  height:20px;
  background-color: red;
}
</style>

2.2 효과