前端vue需求，做几个ribbon，点击那个ribbon，然后ribbon的值进入input中,ribbon可以多选

好的，你需要做几个ribbon按钮，当点击其中一个ribbon按钮时，该ribbon的值会进入input输入框中，同时，可以支持多选。那么，我理解的需求是：

1. 需要做出多个ribbon按钮；
2. 点击其中一个ribbon按钮，该ribbon的值会进入input输入框中；
3. 支持多选。

如果我有误解你的需求，请告诉我。

接下来是我的建议：

1. 首先，你需要用Vue框架来实现这个需求，因为Vue是一个非常好的前端框架，可以很好地实现这个需求；
2. 你可以自定义一个ribbon的组件，然后在这个组件中绑定一个点击事件，当点击该组件时，获取该组件的值，并将该值添加到一个数组中；
3. 在Vue组件中，你可以使用v-model指令来绑定数据，这样当你修改input输入框的值时，会自动更新组件的值；
4. 为了支持多选，你需要在点击事件中判断该ribbon是否已经被选中，如果已经被选中，则从数组中移除该值；否则，将该值添加到数组中。

代码示例：

<template>
  <div>
    <ribbon @click="handleClick('ribbon1')">Ribbon 1</ribbon>
    <ribbon @click="handleClick('ribbon2')">Ribbon 2</ribbon>
    <ribbon @click="handleClick('ribbon3')">Ribbon 3</ribbon>
    <input v-model="selectedRibbon">
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRibbons: [],
      selectedRibbon: ''
    }
  },
  methods: {
    handleClick(value) {
      const index = this.selectedRibbons.indexOf(value)
      if (index === -1) {
        this.selectedRibbons.push(value)
      } else {
        this.selectedRibbons.splice(index, 1)
      }
      this.selectedRibbon = this.selectedRibbons.join(',')
    }
  }
}
</script>

在上面的代码中，我们定义了一个ribbon组件，当点击该组件时，会调用handleClick方法，并将该组件的值添加或移除到selectedRibbons数组中。在handleClick方法中，我们通过indexOf方法来判断该ribbon是否已经被选中，如果已经被选中，则从数组中移除该值；否则，将该值添加到数组中。最后，我们将selectedRibbons数组中的值用逗号拼接起来，赋给了selectedRibbon，这样就可以实现需求了。