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>