如何使用Vue.js将逗号分隔的字符串展示为列表格式

• 缺少用户输入绑定：没有添加输入框组件，也没有使用v-model把用户输入的内容和data中的string变量绑定，程序无法获取到用户输入的逗号分隔字符串。
• 输出逻辑不符合需求：当前模板中的v-for逻辑是把拆分后的数组成员再次用逗号拼接回原来的输入格式，和你需要的「每行一个条目」的需求完全相反。
• 缺少异常兼容逻辑：如果用户输入时在逗号前后加了空格、或者输入了多余的首尾逗号，直接split(',')得到的成员会携带多余空格、甚至出现无效空条目，建议做兼容处理。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="demo">
  <!-- 新增输入框，双向绑定用户输入内容 -->
  <input type="text" v-model="string" placeholder="请输入逗号分隔的内容">
  <!-- 用块级元素实现每行一个条目 -->
  <div v-for="(item, index) in lists" :key="index">
    {{item}}
  </div>
</div>

<script>
var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      string: ''
    };
  },
  computed: {
    lists: function(){
      // 兼容空输入、成员带空格、多余逗号的场景
      return this.string ? this.string.split(',').map(item => item.trim()).filter(item => item) : []
    }
  }
})
</script>
</body>
</html>

• 新增输入框，通过v-model="string"双向绑定用户输入内容，实时同步到data变量中
• 把原有的拼接逗号的输出逻辑替换为用div包裹每个拆分后的成员，div本身是块级元素，会自动换行，实现每行一个条目的效果
• 优化了computed中lists的计算逻辑：拆分后对每个成员做去空格处理，同时过滤空字符串，避免用户输入多余逗号时产生无效的空条目

内容的提问来源于stack exchange，提问作者Inayat Kazi