Vue 데이터 바인딩을 사용하여 switch 문을 올바르게 표현하는 방법

Vue 데이터 바인딩을 사용하여 switch 문을 올바르게 표현하는 방법

범위 값이 변경될 때마다 버튼의 텍스트를 변경하는 범위 입력의 간단한 사용 사례가 있습니다.Vue.js를 사용하여 단순히 범위 값을 저장하는 객체에서 데이터를 바인드하고 버튼(및 디버깅을 쉽게 하기 위해 카운터)으로 되돌립니다.

다음 예제에서는 범위 값이 0보다 크면 텍스트가 "구입"으로 표시되고 그렇지 않으면 "판매"로 표시됩니다.

바이올린: http://jsfiddle.net/svwa79pe/1/

범위 값이 양수인지 음수인지 제로인지에 따라 3개의 버튼 상태를 표시합니다.Vue 핸들바 / 콧수염 구문을 사용하여 삼원 표현을 만들 수 있지만, 세 번째 상태를 어떻게 커버하는지 알 수 없습니다.필요한 것은 3진수라기보다는 스위치 문에 가깝습니다만, Vue의 문서에서는 이와 유사한 것을 찾을 수 없습니다.

• Vue에는 제가 모르는 이런 종류의 논리를 위한 툴이 포함되어 있습니까?
• 레인지 체인지로 기동하는 커스텀 방식으로 대응하면 되는 것입니까?
• Vue 템플릿을 잘못 사용하고 있는 것 뿐입니까?속성이나 뭐 더 좋은 방법이 있을까요?

HTML

<div id="app">
  <span>
    <button disabled="true">{{ item.delta }}</button>
  </span>
  <input type="range" v-model="item.delta" value="0" v-bind:max="item.stock" v-bind:min="0 - item.loot">
  <span class="exchange">
    <button>
      {{ (item.delta > 0) ? "Buy" : "Sell" }}
    </button>
  </span>
</div>

JS

var stats = {
    item : {
    price : 10,
    stock : 20,
    loot : 5,
    delta : 0
  }
}
var app = new Vue({
        el: '#app',
        data: stats
});

일반적으로 템플릿에서 복잡한 로직을 제거합니다.이 경우 다른 데이터에 기반한 값을 원하기 때문에 계산된 속성의 이상적인 사용 사례입니다.

computed:{
  btnText(){
    if (this.item.delta > 0) return "Buy"
    if (this.item.delta < 0) return "Sell"
    return "Nothing"
  }
}

여기에서는 간단한 if 문을 사용하고 있습니다만, 스위치를 사용하고 싶은 경우는, 확실히 사용할 수 있습니다.템플릿에서 다음과 같이 사용됩니다.

<button>
  {{ btnText }}
</button>

여기 작업 예가 있습니다.

var stats = {
  item : {
    price : 10,
    stock : 20,
    loot : 5,
    delta : 0
  }
}
var app = new Vue({
  el: '#app',
  data: stats,
  computed:{
    btnText(){
      if (this.item.delta > 0) return "Buy"
      if (this.item.delta < 0) return "Sell"
      return "Nothing"
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <span>
    <button disabled="true">{{ item.delta }}</button>
  </span>
  <input type="range" v-model="item.delta" value="0" v-bind:max="item.stock" v-bind:min="0 - item.loot">
  <span class="exchange">
    <button>
      {{ btnText }}
    </button>
  </span>
</div>

언급URL : https://stackoverflow.com/questions/46980269/proper-way-to-express-switch-statement-with-vue-data-bindings