Vue轉字元串詳解

一、Vue轉字元串為中文

在Vue中，通過使用{{}}來顯示數據。但是當字元串中含有中文時，直接在模版中寫入會出現亂碼。這時可以使用Vue內置的$filter進行中文轉碼。

  <template>
    <div>
      {{'中文字元串'|translate}}
    </div>
  </template>
  <script>
    export default {
      filters: {
        translate: function(value) {
          return escape(value);
        }
      }
    }
  </script>

二、Vue字元串拼接換行

在Vue中，當需要在模版中拼接字元串時，可以使用加號+進行拼接。但是這種方式拼接多行字元串時會使代碼格式不美觀。可以使用ES6模版字元串來生成多行字元串。

  <template>
    <div>
      {{`Hello,${name}!
      How are you doing today?`}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          name: 'Vue'
        }
      }
    }
  </script>

三、Vue字元串轉數組

在Vue中，當需要將字元串轉為數組時，可以使用split()函數。

  <template>
    <div>
      {{str.split(',')}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: 'Vue,React,Angular'
        }
      }
    }
  </script>

四、字元串逆轉

在Vue中，當需要將一個字元串逆轉時，可以使用JavaScript的split()函數和reverse()函數。

  <template>
    <div>
      {{str.split('').reverse().join('')}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: 'Vue'
        }
      }
    }
  </script>

五、Vue字元串轉小寫

在Vue中，當需要將一個字元串轉為小寫時，可以使用JavaScript的toLowerCase()函數。

  <template>
    <div>
      {{str.toLowerCase()}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: 'Vue'
        }
      }
    }
  </script>

六、Vue字元串轉number

在Vue中，當需要將一個字元串轉為數字類型時，可以使用JavaScript的parseInt()函數。

  <template>
    <div>
      {{parseInt(str)}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: '123'
        }
      }
    }
  </script>

七、Vue字元串轉時間

在Vue中，當需要將一個字元串轉為時間類型時，可以使用JavaScript的Date()函數。

  <template>
    <div>
      {{new Date(str)}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: '2021-10-01'
        }
      }
    }
  </script>

八、字元串轉int

在Vue中，當需要將一個字元串轉為int類型時，可以使用JavaScript的parseInt()函數，並指定進位。

  <template>
    <div>
      {{parseInt(str, 16)}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: 'FF'
        }
      }
    }
  </script>

九、Vue字元串轉大寫

在Vue中，當需要將一個字元串轉為大寫時，可以使用JavaScript的toUpperCase()函數。

  <template>
    <div>
      {{str.toUpperCase()}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: 'Vue'
        }
      }
    }
  </script>

十、字元串轉map

在Vue中，當需要將一個字元串轉為Map集合時，可以使用JavaScript的split()函數和Map()構造函數。

  <template>
    <div>
      {{new Map(str.split(',').map(item=>item.split('=')))}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          str: 'name=Vue,author=Google'
        }
      }
    }
  </script>