Question

我已经创建了我要构建的应用程序的非常简化版本的Codepen（对Vue来说是新功能）：

https://codepen.io/dagford/project/editor/XVaaBo

问题1 -我想使用methods而不是computed，因为您可以看到如果我使用methods会发生什么。

问题2 -displayTotal函数根本不起作用（无论我使用的是计算方法还是计算方法。

Answer 1

您应该仅对total使用计算的。 From vue doc

表示dependencies的任何更改都会重新计算

计算的属性根据其依赖关系进行缓存。

var app1 = new Vue({
  el: '#app1',
  data: {
    message: 'Hello Vue.js!',
    num1: 1,
    num2: 2  
  },
  computed: {
       displayTotal: function() {
             return parseFloat(this.num1) + parseFloat(this.num2);
       }
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>My New Pen!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
      <div id="app1">
          <p>{{ message }}</p>
          <p>Display number one: {{ num1 }} : <input type="number" v-model="num1"></p>
          <p>Display number two: {{ num2 }} : <input type="number" v-model="num2"></p>
           <p>Display total:  {{ displayTotal }}</p>
    </div>
</body>
</html>

Answer 2

displayNum1和displayNum2是方法，但是您将它们作为var寻址。尝试将（）放入html

<p>Display number one: {{ displayNum1() }}</p>
<p>Display number two: {{ displayNum2() }}</p>

这也适用于您的displayTotal（）;

Vue.js-方法与计算怎么了

2 个答案: