一、Vue分割字符串换行
对于字符串中的换行符 (\n)，我们可以使用 Vue 中提供的 $options.methods 来将其替换成
标签：
Vue.mixin({
methods: {
breakLine(text) {
return text.replace(/\n/g, '
')
}
}
})
然后在模板中使用：
二、Vue app.js分割
常见的需求是在 app.js 中分割字符串，Vue 中可以使用 split 方法:
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
splitMessage () {
return this.message.split('')
}
}
}
将字符串分割成单个字符，并存储在 splitMessage 计算属性中，然后在模板中使用 v-for 循环来渲染：
{{ letter }}
三、Vue分割字符串添加属性
在 Vue 中，我们可以使用函数式组件的方式来自定义标签，并给其添加属性，例如我们需要给字符串中的某个部分加上 class 或者 id，可以这样实现：
{{ props.text }}
在模板中使用:
四、Vue截取字符串
Vue 中的 substr 和 substring 都可以用来截取字符串。substr 和 substring 的第一个参数都是要截取的开始索引位置，不同之处在于第二个参数，substr 中第二个参数表示截取几个字符，而 substring 中第二个参数表示结束索引位置。
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
subMessage () {
return this.message.substr(0, 5)
},
subString () {
return this.message.substring(0, 5)
}
}
}
在模板中使用:
{{ subMessage }}
{{ subString }}
五、字符串分割
在 Vue 中，可以通过使用 split 方法将字符串分割成数组：
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
splitMessage () {
return this.message.split(' ')
}
}
}
在模板中使用：
{{ word }}
六、Vue 代码分割
在 Vue 中，可以使用动态组件来分割代码，实现按需加载的效果。使用 来动态加载组件。
例如：
export default {
data () {
return {
comp: 'HelloWorld'
}
},
components: {
HelloWorld: () => import('./HelloWorld.vue')
}
}
在模板中使用：
七、Vue截取字符串方法
除了使用 substr 和 substring 外，Vue 还提供了 slice 方法用于截取字符串，和 JavaScript 中的 slice 方法一样。
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
sliceMessage () {
return this.message.slice(0, 5)
}
}
}
在模板中使用：
{{ sliceMessage }}
八、Vue string分割
除了使用 split 方法外，Vue 还提供了 match 方法用于从字符串中提取出符合检索条件的部分，返回一个数组。
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
matchMessage () {
return this.message.match(/hello/i)
}
}
}
在模板中使用：
{{ matchMessage }}
九、Vue取字符串的前四位
Vue 中，可以通过使用 substring 或 slice 方法中的第二个参数来截取字符串中的前几位字符。
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
subMessage () {
return this.message.substring(0, 4)
},
sliceMessage () {
return this.message.slice(0, 4)
}
}
}
在模板中使用：
{{ subMessage }}
{{ sliceMessage }}
十、Vue根据关键字截取字符串
在 Vue 中，可以使用 indexOf 方法以及 substr 或 substring 方法来根据关键字截取指定的字符串部分。
export default {
data () {
return {
message: 'Hello World'
}
},
computed: {
keywordMessage () {
const keywordIndex = this.message.indexOf('o')
return this.message.substr(keywordIndex, 5)
}
}
}
在模板中使用：
{{ keywordMessage }}
原创文章，作者：MQSR，如若转载，请注明出处：https://www.506064.com/n/136768.html
微信扫一扫 
支付宝扫一扫 