단아산보

vue.js numeric and string conversion 

Numeric to String Conversion:

// Numeric to String Conversion
let numericValue = 123;
let stringValue = `${numericValue}`; // String interpolation
// Or
let stringValue = numericValue.toString(); // Using toString() method

String to Numeric Conversion:

// String to Numeric Conversion
let stringValue = "123";
let numericValue = parseInt(stringValue); // For integers
// Or
let floatValue = parseFloat(stringValue); // For floats

Rounding:

let number = 10.6;

let rounded = Math.round(number); // Rounds to the nearest integer
// Output: 11

let roundedDown = Math.floor(number); // Rounds down to the nearest integer
// Output: 10

let roundedUp = Math.ceil(number); // Rounds up to the nearest integer
// Output: 11

let number = 10.6789;
let decimalPlaces = 2;
let rounded = Math.round(number * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
// Output: 10.68

Template Example:

<template>
  <div>
    <p>Numeric to String Conversion: {{ numericValue.toString() }}</p>
    <p>String to Numeric Conversion: {{ parseInt(stringValue) }}</p>
    <p>Rounded Number: {{ Math.round(number) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numericValue: 123,
      stringValue: "123",
      number: 10.6
    };
  }
};
</script>

Result:

<p>Numeric to String Conversion: 123</p>
<p>String to Numeric Conversion: 456</p>
<p>Rounded Number: 11</p>

싱글 파일 업로드 일 경우 

<template>
  <div>
    <v-file v-model="file" accept="image/*" @change="onFileChange" />
    <img v-if="previewImage" :src="previewImage" />
    <button @click="uploadFile" :disabled="!file">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      previewImage: null,
    }
  },
  methods: {
    onFileChange() {
      if (this.file) {
        this.previewImage = URL.createObjectURL(this.file)
      } else {
        this.previewImage = null
      }
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)

      // Make your API call to upload the file with the formData
      // ...
    }
  },
  beforeDestroy() {
    if (this.previewImage) {
      URL.revokeObjectURL(this.previewImage)
    }
  }
}
</script>

다중파일 업로드 일 경우

<template>
  <div>
    <v-file v-model="files" accept="image/*" multiple @change="onFileChange" />
    <div v-for="(preview, index) in previewImages" :key="index">
      <img :src="preview" />
    </div>
    <button @click="uploadFiles" :disabled="!files || !files.length">Upload</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      previewImages: [],
    }
  },
  methods: {
    onFileChange() {
      this.previewImages = []
      for (let i = 0; i < this.files.length; i++) {
        const file = this.files[i]
        if (file && file.type.startsWith('image/')) {
          this.previewImages.push(URL.createObjectURL(file))
        }
      }
    },
    uploadFiles() {
      const formData = new FormData()
      for (let i = 0; i < this.files.length; i++) {
        formData.append('files[]', this.files[i])
      }

      // Make your API call to upload the files with the formData
      // ...
    }
  },
  beforeDestroy() {
    for (let i = 0; i < this.previewImages.length; i++) {
      URL.revokeObjectURL(this.previewImages[i])
    }
  }
}
</script>

beforeDestroy 

beforeDestroy 는 라이프사이클 훅 중 하나로 

컴포넌트가 소멸 되기 직전에 호출된다. 

따라서 위 예제에서는 이미지 파일의 URL 을 삭제하는 역할을 한다.

소스코드에서 바로 나누기 하는 방법

<ul>
  <li v-for="(item, index) in dataList" :key="index">
    {{ (item / 1024).toLocaleString() }}
  </li>
</ul>

computed 로 data 자체를 가공해서 노출 하는 방법

<ul>
  <li v-for="(item, index) in filteredDataList" :key="index">
    {{ item }}
  </li>
</ul>

computed: {
  filteredDataList() {
    return this.dataList.map(item => {
      return (item / 1024).toLocaleString();
    });
  },
},