vue字符串以逗号转数组

在 Vue.js 中将字符串按逗号分割转换为数组
在 Vue.js 应用程序中，可以利用 JavaScript 的内置 split 方法来实现这一功能。此方法适用于任何需要处理字符串并将其拆分为数组的情况。
对于简单的场景，在模板绑定或计算属性内直接调用 split() 函数即可完成操作：
<div id="app">
<!-- 假设 data() 返回的对象中有 message 属性 -->
<p>原始字符串: {{ message }}</p>

<!-- 使用 split 将字符串转为数组，并展示第一个元素 -->
<p v-if="messageArray.length">数组中的首个元素: {{ messageArray[0] }}</p>

</div>
登录后复制
new Vue({
el: '#app',
data() {
return {
message: 'apple,banana,cherry'
}
},
computed: {
messageArray() {
// 如果 message 是空串，则返回空数组；否则按照逗号切割字符串
return this.message ? this.message.split(',') : []
}
}
})
登录后复制
上述代码展示了如何定义一个名为 messageArray 的计算属性[^1]，该属性会依据 message 数据的变化自动更新其值。每当 message 发生改变时，都会触发重新计算逻辑，从而得到最新的数组形式的结果。