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

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

你每月花多少小时开发票
您可以每月节省{hours}小时
您可以每月节省{{hours}小时
新Vue({
el:'计算'，
数据（）{
返回{
小时：
保存：
}
},

你好，anaisUx，欢迎来到SO

您需要生成某种代码示例。您尝试了什么？什么不起作用

但要回答您关于v-if的问题：v-if不会帮助您解决问题。v-if在VueJS模板中用于指示是否应呈现元素。您在这里描述的是某种业务逻辑，您不应该将其放入模板中，而应该放入组件中，然后在模板中呈现结果

在不太苛刻的情况下，看起来您对VueJS和编程非常陌生，所以我将指导您正确的方向

创建您的VuJS应用程序：

创建输入（花费的时间）并将其绑定到数据属性：

节省的时间取决于所花费的时间，因此computed属性看起来可能有效：

用简单的if语句编写业务逻辑

换言之：

创建名为TimePent的数据属性

在模板中创建输入并将其绑定到TimePent

创建一个名为timesaved的计算属性，该属性使用TimePent计算客户将节省多少时间

在模板中保存渲染时间

预期结果：客户在您的输入中键入内容后，VueJS应用程序应立即向模板呈现timesaved。这应自动更新

您可以在codepen、jsfiddle、codesandbox.io/s/vue或任何其他类似站点上进行练习，并将代码发布到此处以获得一些反馈

编辑：由于您已经做了一些努力和尝试，下面是一个工作示例：

newvue({
el:“#应用程序”，
数据（）{
返回{
小时数：“”
}
},
计算：{
保存（）{
如果（this.hours>0&&this.hours<20）{
返回1
}
如果（this.hours>=20&&this.hours<30）{
返回10
}
如果（this.hours>=30&&this.hours<50）{
返回20
}            
如果（this.hours>=50）{
返回30
}            
}
}
})

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

---

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

您可以显示您尝试过的代码吗？另外，在这样做问题时（它不像论坛）如果你的标题不是一个问题，你很可能不会得到一个有效的SOI问题。我想将CodeSandbox添加到实践站点列表中。它非常擅长模拟带有网页包和单文件组件的Vue CLI项目~添加了代码，抱歉，这是我第一次在这里发布，希望能找到解决我问题的方法。没问题，我们都必须从某个地方开始。你有指向你的示例的链接吗？从你的代码看，你缺少vue应用程序的脚本标记。它已添加，但我没有在任何地方托管它，数据绑定正在工作，计算器会根据我的需要对其进行编码，但在任何地方都找不到示例。应该是

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