0

Estou tentando por meio do VueJS realizar a alteração das paginas e dos valores correspondentes ao mover o input type="range". Por exemplo: value: 16$ / 100K PAGESVIEWS, value: 24$ / 500K PAGEVIEWS

Também gostaria de saber como por meio de um toggle ativado, acrescentar 25% de desconto para o value

new Vue({
el: "#app",
data: {
    
        value: "16.00",
        pages: "100K"
    
},
    watch: {
        value(pages) {
            if(this.value < 9) {
               return pages = "10K"
            } else if (this.value > 8 && this.value < 13) {
               return pages = "50K"
            } else if (this.value > 13 && this.value < 17) {
               return pages = "100K"
            } else if (this.value > 17 && this.value < 25) {
               return pages = "500K"
            } else {
               return pages = "1M"
            }
        }
    }
})
<div id="app">
    <div class="bar">
      <input v-model="value" type="range" class="mySlider" min="8.00" max="36.00" width="400px">
      <div class="values">
        <span class="range-pages">{{ pages }} Pageviews</span>
          <p>${{ value }}</p> / month
      </div>
    </div>

    <div class="toggle">
      Monthly Billing <span> 0/0</span>
      Yearly Billing <span class="disc">25% discount</span>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

2 Respostas 2

1

Você pode usar computed_properties para calcular o valor com desconto e o pages, porque ambos dependem da variável value.

Sinceramente, não tem muito o que explicar porque o que mudei foi só a estrutura do seu código, não usei nenhum conceito novo que você já não esteja usando (fora computed_properties, mas você já está usando watch que é mais complicado na minha opinião).

PS: Criei um filtro só para formatar o valor calculado.

new Vue({
  el: "#app",
  data: {
    value: 16.00,
  },
  computed: {
    pages: function() {
      if (this.value < 9) return "10K";
      else if (this.value < 13) return "50K";
      else if (this.value < 17) return "100K";
      else if (this.value < 25) return "500K";
      else return "1M";
    },
    value_with_discount: function() {
        return this.value * 0.75;
    },
    yearly_total: function () {
        return this.value_with_discount * 12;
    }
  },  
  filters: {
    decimal: function(value) {
      return parseFloat(value).toFixed(2);
    }
  }
})
<div id="app">
    <div class="bar">
      <input v-model="value" type="range" class="mySlider" min="8.00" max="36.00" width="400px">
      <div class="values">
        <span class="range-pages">{{ pages }} Pageviews</span>
          <p>${{ value | decimal }} / month</p>
          <p>${{ value_with_discount | decimal }} / month (Yearly billing 25% discount) Total: ${{ yearly_total | decimal }}</p>
      </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

0

Bom dia, é possível pegar um campo tipo data no formato YYYY-mm-dd HH:ii:ss e depois, subtraindo a data hora atual, retornar a diferença em Dias HH:mm:ss ??? Teria como demonstrar um código para isso?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .