如何使用 v-model 和 v-if 使用 Vue.js 构建一个简单的计算器？

Question

我需要在 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: 
                   }
       },

Answer 1

您好 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. 在您的模板中创建一个输入并将其绑定到 timespent
3. 创建一个名为timesaved 的计算属性，它使用timespent 来计算客户将节省多少时间。
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
      }            
    }
  }
})

数据属性 hours 存储客户在开发票上花费的小时数。就像我上面提到的，不需要多个 v-if，业务逻辑应该留在组件中。

我使用了一个计算属性 save 来存储客户可以节省的时间。