代码之家 › 专栏 › 技术社区 › Success Man

如何在引导vue上生成按钮减号和加号?

vue-component bootstrap-4 vuejs2 twitter-bootstrap css

1

Success Man · 技术社区 · 7 年前

我从这里得到教程: 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>

因此,如果点击按钮加上,数量上升

2 回复 | 直到 7 年前

1

6

Vucko 7 年前

从 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

3

SVE 7 年前

可能是这样的:

<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