Question

我正在学习Vue，并且正在做一个简单的计算器应用程序，但是我似乎无法使其正常工作。我目前只打印数字和操作员进行测试，但是每次都会在控制台中看到“ Vue未定义错误”。我目前在同一页面上还有其他“应用”，例如掷骰子不会产生错误；当我删除“计算器”选项卡时，控制台错误消失。

我还尝试了从data（）函数以及其他一些东西中删除Vue定义。控制台日志还抱怨我的变量number1，number2和操作未在实例中定义，但在渲染期间被引用。当前，您可以选择一个数字，并且操作员和程序将始终打印它们。

@CircuitBreaker
public String readingList() {
URI uri = URI.create("http://localhost:8090/recommended");

  return this.restTemplate.getForObject(uri, String.class);
}

@Recover
public String reliable() {
  return "Cloud Native Java (O'Reilly)";
}

我的主挂载了包含以下内容的App.vue文件

import requests

url = requests.get('http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/353595?res=3hourly&key=**APIKEY**').json()

Answer 1

这是使用计算属性尝试执行操作的好方法。您不需要定义很多方法-

<template>
  <div>
    <h2>Calculator</h2>
    <input type="number" v-model="number1" placeholder="Write a number">
    <select v-model="operation">
      <option disabled value="">Select one</option>
      <option id='plus'>+</option>
      <option id='minus'>-</option>
      <option id='multiply'>*</option>
      <option id='divide'>/</option>
    </select>
    <input type="number" v-model="number2" placeholder="Write a number">
    <p>{{ number1 }} {{ operation }} {{ number2 }} = {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: 0,
      number2: 0,
      operation: ''
    }
  },
  computed: {
    result() {
      if (this.operation == '+')
        return this.number1 + this.number2

      if (this.operation == '-')
        return this.number1 - this.number2

      if (this.operation == '*')
        return this.number1 * this.number2

      if (this.operation == '/')
        return this.number1 / this.number2
      
      return 0  // we always need to return something in a computed property
    }
  }
}
</script>

它已经过测试，并且可以按预期工作。

Answer 2

<template>
    <div id="calc">
        <h2>Calculator</h2>
        <input v-model.number="number1" placeholder="Write a number">
        <select v-model="operations" id="ope">
            <option disabled value="">Select one</option>
            <option id='plus'>+</option>
            <option id='minus'>-</option>
            <option id='multiply'>*</option>
            <option id='divide'>/</option>
        </select>
        <input v-model.number="number2" placeholder="Write a number">
        <p>{{ number1 }} {{ operations }} {{ number2 }}</p>
    </div>
</template>

<style>
    input {
        text-align: center;
        width: 100px;
        margin: 7px;
    }
</style>
<script>
  export default {
  data: () => ({
    operations: "",
    number1: '',
    number2: '',
  }),
  methods:{
    plus(){},
    minus(){},
    multiply(){},
    divide(){},
  }

}
</script>

尽管我已经定义了Vue，但尚未定义

2 个答案: