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

Posted 2023-02-23

【中文标题】如何使用 v-model 和 v-if 使用 Vue.js 构建一个简单的计算器？

【英文标题】：How can I build a simple calculator with Vue.js, using v-model and maybe v-if?

【发布时间】：2019-11-19 13:24:03

【问题描述】：

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

【问题讨论】：

你能显示你试过的代码吗？

另外，当你在 SO 上提问时（它不像论坛），如果你的标题不是问题，那么你可能最终不会得到一个有效的 SO 问题

【参考方案1】：

您好 anaisUx，欢迎来到 SO。

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

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

不要太苛刻，看起来你对 VueJS 和一般编程都很陌生，所以我会引导你朝着正确的方向前进。

创建您的 VuuJS 应用程序：https://vuejs.org/v2/guide/#Getting-Started

创建您的输入（花费的时间）并将其绑定到数据属性：https://vuejs.org/v2/guide/#Handling-User-Input

节省的时间取决于花费的时间，因此计算属性看起来可能会起作用：https://vuejs.org/v2/guide/computed.html

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

换句话说：

创建一个名为 timespent 的数据属性 在您的模板中创建一个输入并将其绑定到 timespent 创建一个名为timesaved 的计算属性，它使用timespent 来计算客户将节省多少时间。 在您的模板中节省渲染时间

预期结果：一旦客户在您的输入中键入内容，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 来存储客户可以节省的时间。

【讨论】：

我想将 CodeSandbox 添加到练习站点列表中。用 Webpack 和单文件组件模拟 Vue CLI 项目真的很不错~codesandbox.io/s/vue

添加了代码，不好意思，这是我第一次在这里发帖，希望能解决我的问题。

没问题，我们都必须从某个地方开始。你有你的例子的链接吗？从您的代码来看，您缺少 vue 应用程序的脚本标记。

添加了，但我没有在任何地方托管它，数据绑定正在工作，计算器 sn-p 它是我需要的，但在任何地方都找不到示例。

应该是