Vue js如何用split切分并去掉空值和item的空格

首先，我们需要明确split是字符串的一个方法，Vue js并不提供这个方法，我们可以利用JavaScript语言特性来进行字符串分割和操作。

下面是如何使用split方法来切分字符串并去掉空值和item的空格的完整攻略：

1.使用split方法分割字符串

我们需要对目标字符串使用split方法，将字符串根据指定的分割符分割成一个数组。

var str = 'Hello World';
var arr = str.split(' ');
console.log(arr); // ["Hello", "World"]

2.去掉数组中的空值和item的空格

一般来说，我们需要去掉数组中的空值和item的空格。可以通过循环遍历数组每一个元素，并对其进行处理。

var str = 'Hello World';
var arr = str.split(' ');

for (var i = 0; i < arr.length; i++) {
  arr[i] = arr[i].trim(); // 去掉item中多余的空格
  if (!arr[i]) {
    arr.splice(i, 1); // 去掉空值
    i--; // 因为删除了一个元素，要将i减1
  }
}

console.log(arr); // ["Hello", "World"]

3.Vue组件中使用的示例

下面是一个Vue组件的示例，演示了如何在Vue中使用split方法切分字符串并去掉空值和item的空格：

<template>
  <div>
    <h3>将一个字符串切分成数组</h3>
    <input v-model="str" type="text" />
    <button @click="splitStr">切分</button>
    <p>结果: {{ arr }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '',
      arr: []
    }
  },
  methods: {
    splitStr() {
      var arr = this.str.split(' ');
      for (var i = 0; i < arr.length; i++) {
        arr[i] = arr[i].trim();
        if (!arr[i]) {
          arr.splice(i, 1);
          i--;
        }
      }
      this.arr = arr;
    }
  }
}
</script>

上述示例中，我们为Vue组件定义了一个data对象，包含了一个字符串str和一个数组arr。在splitStr方法中，我们对字符串str进行了split、循环、trim及splice等操作，最终得到一个不包含空值和多余空格的新数组，赋值给arr属性，以便在模板中进行展示。

4.其他示例

除了上面的示例以外，我们还可以进行更多的探索，比如：

示例1：使用正则表达式切分

如果要使用正则表达式切分，可以利用JavaScript中的正则表达式来实现：

var str = 'Hello  World ';
var reg = /\s+/; // 匹配空白符
var arr = str.split(reg);
for (var i = 0; i < arr.length; i++) {
  arr[i] = arr[i].trim();
  if (!arr[i]) {
    arr.splice(i, 1);
    i--;
  }
}
console.log(arr); // ["Hello", "World"]

示例2：将字符串拆成单个字符的数组

如果要将一个字符串拆分成单个字符的数组，可以使用TerryZ的VueFilters插件来实现：

<template>
  <div>
    <!-- 使用filter来拆分字符串成单个字符的数组 -->
    <p>{{ str | split('') }}</p>
  </div>
</template>

<script>
import Vue from 'vue'
import VueFilters from 'vue-filters'

Vue.use(VueFilters)

export default {
  data() {
    return {
      str: 'Hello'
    }
  }
}
</script>

上述示例中，我们首先引入了vue-filters插件，然后在模板中使用splitfilter来将字符串拆分为单个字符的数组。