Question

我从这里获得教程：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>

结果如下：

我如何使按钮的正负号起作用？

因此，如果单击加号按钮，数量将增加

Answer 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>

Answer 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

我如何在引导Vue上使按钮减号和加号？

2 个答案: