商品下单份数输入框 - Vue.js 代码示例

该代码示例展示了一个使用 Vue.js 实现的商品下单份数输入框。当 Goods.repetition 属性值为 1 时，输入框会显示出来，否则隐藏。输入框包含增加和减少按钮，以及一个可输入数字的输入框。用户可以通过按钮调整份数，也可以直接在输入框中输入数字。

代码说明：

• v-if='Goods.repetition == 1'：判断 Goods.repetition 属性值是否为 1，如果为 1，则显示该元素，否则隐藏。
• @click='PriceLs(1)'：点击减号按钮时，执行 PriceLs 方法，并将参数 1 传入。
• @click='PriceLs(2)'：点击加号按钮时，执行 PriceLs 方法，并将参数 2 传入。
• @input='PriceLs'：输入框内容改变时，执行 PriceLs 方法。
• v-model.number='num'：将输入框的值绑定到 num 变量，并将其类型设置为数字。
• :min='min'：设置输入框的最小值。
• :max='max'：设置输入框的最大值。

使用方法：

1. 将该代码复制到你的 Vue.js 项目中。
2. 确保 Goods 对象中存在 repetition 属性，并将其值设置为 1 或其他值，以控制输入框的显示状态。
3. 定义 PriceLs 方法，并在其中处理份数改变事件。

示例：

// 定义 Goods 对象
const Goods = {
  repetition: 1 // 设置 repetition 属性为 1
};

// 定义 PriceLs 方法
const PriceLs = (type) => {
  if (type === 1) {
    // 减号按钮点击事件，减少份数
  } else if (type === 2) {
    // 加号按钮点击事件，增加份数
  }
};

该代码示例可以帮助你快速实现一个简单的商品下单份数输入框。你可以根据实际需求修改代码，例如添加输入框验证、修改样式等。