Как я могу построить простой калькулятор с Vue.js, используя v-модель и, возможно, v-if? - PullRequest
Новая
       13

Как я могу построить простой калькулятор с Vue.js, используя v-модель и, возможно, v-if?

0 голосов
/ 10 июля 2019

Мне нужно создать простой компонент в Vue.Js, в котором есть поле ввода, которое показывает количество часов, которые пользователь мог бы сэкономить, если бы они переключились на наше программное обеспечение. Как я могу использовать директиву v-if:

Если они проводят 20-30 часов, они сэкономят 10 часов в месяц, 30 - 50 часов, они сэкономят 20 часов / мес. Вот мои настройки для HTML: 

<div id="app">
<label> How Many Hours Do You spent per Month doing Invoicing
<input v-model="{{ hours }}" />
<p v-if="hours <=20 "> You could save {{hours}} hours every month </p>
<p v-else-if="hours > 20 ">You could save {{hours}} hours every month</p>
</div>
new Vue({
    el: '#calc',
         data() {
            return {
               hours:
               save: 
                   }
       },

1 Ответ

0 голосов
/ 10 июля 2019

Привет anaisUx и добро пожаловать на SO.

Вам нужно привести пример кода. Что вы пробовали? Что не работает?

Но чтобы ответить на ваш вопрос о v-if: v-if не поможет вам с вашей проблемой. v-if используется в шаблонах VueJS, чтобы указать, должен ли элемент отображаться или нет. Здесь вы описываете какую-то бизнес-логику, которую не следует вставлять в шаблоны, а внутри компонента, а затем отображать результаты в шаблоне.

Не будь слишком резким, похоже, что ты совсем новичок в VueJS и программировании в целом, поэтому я собираюсь направить тебя в правильном направлении.

  1. Создайте приложение VuuJS: https://vuejs.org/v2/guide/#Getting-Started

  2. Создайте свой ввод (затраченное время) и свяжите его со свойством данных: https://vuejs.org/v2/guide/#Handling-User-Input

  3. Экономия времени зависит от затраченного времени, поэтому вычисляемое свойство выглядит так, как будто оно может работать: https://vuejs.org/v2/guide/computed.html

  4. Напишите свою бизнес-логику с помощью простых операторов if.

Другими словами:

  1. Создать свойство данных с именем timespent
  2. Создайте входные данные в своем шаблоне и свяжите их с временным интервалом
  3. Создайте вычисляемое свойство с именем timesaved, которое использует временную шкалу для расчета того, сколько времени сэкономит клиент.
  4. Рендеринг, сохраненный в вашем шаблоне

Ожидаемый результат: как только клиент вводит что-то в ваш ввод, приложение VueJS должно отрисовывать время с сохранением шаблона. Это должно обновиться автоматически.

Вы можете попрактиковаться на codepen, jsfiddle, codesandbox.io/s/vue или любом другом подобном сайте и опубликовать свой код здесь, чтобы получить обратную связь.

Редактировать: Поскольку вы приложили усилия и немного попробовали, вот рабочий пример:

https://codepen.io/bergur/pen/WqPjNo

new Vue({
  el: '#app',
  data() {  
    return {
      hours: ''       
    }
  },
  computed: {
    save() {
      if (this.hours > 0 && this.hours < 20) {
        return 1
      }
      if (this.hours >= 20 && this.hours < 30) {
        return 10
      }

      if (this.hours >= 30 && this.hours < 50) {
        return 20
      }            

      if (this.hours >= 50) {
        return 30
      }            
    }
  }
})

Данные свойства часов хранят количество часов, потраченных клиентом на выставление счетов. Как я упоминал выше, нет необходимости в множественном v-if, бизнес-логика должна оставаться в компоненте.

Я использовал вычисленное свойство save, в котором хранятся часы, которые клиент может сэкономить.

...