Vue分割字符串

发布时间：2023-05-20

一、Vue分割字符串换行

对于字符串中的换行符 (\n)，我们可以使用 Vue 中提供的 $options.methods 来将其替换成 <br> 标签：

Vue.mixin({
  methods: {
    breakLine(text) {
      return text.replace(/\n/g, '<br>')
    }
  }
})

然后在模板中使用：

<span v-html="breakLine(message)"></span>

二、Vue app.js分割

常见的需求是在 app.js 中分割字符串，Vue 中可以使用 split 方法:

export default {
  data () {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    splitMessage () {
      return this.message.split('')
    }
  }
}

将字符串分割成单个字符，并存储在 splitMessage 计算属性中，然后在模板中使用 v-for 循环来渲染：

<p v-for="letter in splitMessage">{{ letter }}</p>

三、Vue分割字符串添加属性

在 Vue 中，我们可以使用函数式组件的方式来自定义标签，并给其添加属性，例如我们需要给字符串中的某个部分加上 class 或者 id，可以这样实现：

<template functional>
  <span :class="`highlight ${props.cls}`" :id="props.id">{{ props.text }}</span>
</template>

在模板中使用:

<highlight text="Vue.js" cls="bold" id="vue"></highlight>

四、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)
    }
  }
}

在模板中使用:

<p>{{ subMessage }}</p>
<p>{{ subString }}</p>

五、字符串分割

在 Vue 中，可以通过使用 split 方法将字符串分割成数组：

export default {
  data () {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    splitMessage () {
      return this.message.split(' ')
    }
  }
}

在模板中使用：

<p v-for="word in splitMessage">{{ word }}</p>

六、Vue 代码分割

在 Vue 中，可以使用动态组件来分割代码，实现按需加载的效果。使用 <component :is="comp"></component> 来动态加载组件。 例如：

export default {
  data () {
    return {
      comp: 'HelloWorld'
    }
  },
  components: {
    HelloWorld: () => import('./HelloWorld.vue')
  }
}

在模板中使用：

<component :is="comp"></component>

七、Vue截取字符串方法

除了使用 substr 和 substring 外，Vue 还提供了 slice 方法用于截取字符串，和 JavaScript 中的 slice 方法一样。

export default {
  data () {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    sliceMessage () {
      return this.message.slice(0, 5)
    }
  }
}

在模板中使用：

<p>{{ sliceMessage }}</p>

八、Vue string分割

除了使用 split 方法外，Vue 还提供了 match 方法用于从字符串中提取出符合检索条件的部分，返回一个数组。

export default {
  data () {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    matchMessage () {
      return this.message.match(/hello/i)
    }
  }
}

在模板中使用：

<p>{{ matchMessage }}</p>

九、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)
    }
  }
}

在模板中使用：

<p>{{ subMessage }}</p>
<p>{{ sliceMessage }}</p>

十、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)
    }
  }
}

在模板中使用：

<p>{{ keywordMessage }}</p>
推荐文章