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>