一、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>