编写一个左右加减的输入框里面的值带有百分比符号 vue

你可以使用 Vue 组件的双向绑定功能以及计算属性来实现左右加减，并且在输入框中显示带有百分号的值。下面是一个简单的实现：

<template>
  <div>
    <button @click="increment">+</button>
    <input v-model="percentValue" type="text">
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0, // 当前值，不带百分号
    };
  },
  computed: {
    percentValue: {
      get() {
        return `${this.value}%`; // 在输入框中显示带百分号的值
      },
      set(newValue) {
        this.value = newValue.replace('%', ''); // 去掉输入框中的百分号，更新当前值
      },
    },
  },
  methods: {
    increment() {
      this.value++;
    },
    decrement() {
      this.value--;
    },
  },
};
</script>

这个组件包含三个元素：两个按钮和一个输入框。点击加号按钮会调用 `increment` 方法，点击减号按钮会调用 `decrement` 方法。输入框的值绑定到 `percentValue` 属性，这个属性在 getter 中会返回带百分号的值，在 setter 中会去掉输入框中的百分号，并更新 `value` 属性的值。`value` 属性是当前值，不带百分号。最后，我们可以使用计算属性来计算百分比。