如何在引导 vue 上制作按钮减号和加号？答案

【问题标题】：How can I make button minus and plus on the bootstrap vue?如何在引导 vue 上制作按钮减号和加号？
【发布时间】：2019-03-10 13:25:59
【问题描述】：

我从这里得到教程：https://bootstrap-vue.js.org/docs/components/form-input

我想做这样的：

我尝试这样：

<template>
    ...
        <b-col class="pr-0 custom-control-inline">
            <b-btn variant="warning btn-sm mr-1 mt-1 mb-1"><i class="fa fa-minus-circle"></i></b-btn>
            <b-form-input type="number" class="col-md-3" v-model="quantity"></b-form-input>
            <b-btn variant="info btn-sm ml-1 mt-1 mb-1"><i class="fa fa-plus-circle"></i></b-btn>
        </b-col>
    ...
</template>
<script>
    export default {
        data () {
            return {
                quantity: null
            }
        }
    }
</script>

结果如下：

如何让按钮加减号起作用？

所以如果点击按钮加号，数量会增加

【问题讨论】：

这现在是 BootstrapVue 2.5.0+ 版本的内置组件（参考：bootstrap-vue.js.org/docs/components/form-spinbutton）

标签： css twitter-bootstrap vuejs2 bootstrap-4 vue-component

【解决方案1】：

来自docs：

<b-input-group>
  <b-input-group-prepend>
    <b-btn variant="outline-info">-</b-btn>
  </b-input-group-prepend>

  <b-form-input type="number" min="0.00"></b-form-input>

  <b-input-group-append>
    <b-btn variant="outline-secondary">+</b-btn>
  </b-input-group-append>
</b-input-group>

只需为按钮设置样式，并将click 事件添加到按钮以用于输入数字 逻辑，例如：

new Vue({
  el: '#app',
  data: {
    num: 0
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-input-group>
    <b-input-group-prepend>
      <b-btn variant="outline-info" @click="num--">-</b-btn>
    </b-input-group-prepend>

    <b-form-input type="number" min="0.00" v-model="num"></b-form-input>

    <b-input-group-append>
      <b-btn variant="outline-secondary" @click="num++">+</b-btn>
    </b-input-group-append>
  </b-input-group>
</div>

【讨论】：

【解决方案2】：

可能是这样的：

<template>
  <div class="quantity">
    <b-input-group>
      <b-input-group-prepend>
        <b-btn variant="info" @click="decrement()">-</b-btn>
      </b-input-group-prepend>

      <b-form-input type="number" min="0.00" :value="quantity"></b-form-input>

      <b-input-group-append>
        <b-btn variant="info" @click="increment()">+</b-btn>
      </b-input-group-append>
    </b-input-group>
  </div>
</template>

您可以使用type="number" 或type="text"。

简单的逻辑：

<script>
export default {
  name: "Quantity",
  data() {
    return {
      quantity: 1
    };
  },
  methods: {
    increment() {
      this.quantity++;
    },
    decrement() {
      if (this.quantity === 1) {
        alert("Negative quantity not allowed");
      } else {
        this.quantity--;
      }
    }
  }
};
</script>

Codesandbox example

【讨论】：