Vue分割字元串

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