어떻게 만들 수 있는 부트 스트랩 vue에 단추 마이너스와 플러스?

어떻게 만들 수 있는 부트 스트랩 vue에 단추 마이너스와 플러스?

나는 여기서:자습서 받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>

이런 결과는:

어떻게 버튼 플러스와 마이너스 작품을 만들 수 있을까요?

만약 클릭 버튼 플러스 그래서 수량도 증가합니다.

는 도움말:

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

아마도 다음과 같습니다.

<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 예로서

언급URL:https://stackoverflow.com/questions/52658814/how-can-i-make-button-minus-and-plus-on-the-bootstrap-vue