vue 数组和字符串互转

要将一个字符串转换为数组，可以使用 JavaScript 中的 `split()` 方法。该方法接受一个分隔符作为参数，将字符串分割成一个数组。例如：

let str = "a,b,c,d";
let arr = str.split(","); // 将字符串按逗号分割成数组
console.log(arr); // 输出 ["a", "b", "c", "d"]

要将一个数组转换为字符串，可以使用 JavaScript 中的 `join()` 方法。该方法接受一个字符串作为参数，将数组中的每个元素用该字符串连接成一个字符串。例如：

let arr = ["a", "b", "c", "d"];
let str = arr.join(","); // 将数组用逗号连接成字符串
console.log(str); // 输出 "a,b,c,d"

在 Vue 中，如果要在模板中显示一个数组，可以使用 `v-for` 指令遍历数组并显示每个元素。例如：

<ul>
  <li v-for="item in arr">{{ item }}</li>
</ul>

如果要将用户输入的字符串转换为数组，可以在 Vue 的方法中使用 `split()` 方法。例如：

<template>
  <div>
    <input v-model="inputStr" />
    <button @click="convertToArray">转换为数组</button>
    <ul>
      <li v-for="item in arr">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputStr: "",
      arr: []
    };
  },
  methods: {
    convertToArray() {
      this.arr = this.inputStr.split(",");
    }
  }
};
</script>

上面的代码中，用户在输入框中输入一个逗号分隔的字符串，点击按钮后将其转换为数组，并在页面上显示每个元素。