Vue js增量运算符（++）没有给出预期的输出答案

【问题标题】：Vue js increment operator(++) not giving expected outputVue js增量运算符（++）没有给出预期的输出
【发布时间】：2021-03-12 18:26:18
【问题描述】：

为什么下面的 vue js 代码显示输出 102。

<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
   <div id = "intro" style = "text-align:center;">
      <h1>{{ ++serial }}</h1>
   </div>
   <script type = "text/javascript">
      var app = new Vue({
         el: '#intro',
         data: {
            serial: 0
         }
      });
   </script>
</body>
</html>

我需要一个解释。我的预期输出是 1。如何解决这个问题？

【问题讨论】：

标签： vue.js increment

【解决方案1】：

不允许在模板内运行更新组件属性的语句，因为这会造成无限循环，您可以使用计算属性实现所需的行为，如下所示：

var app = new Vue({
  el: '#intro',
  data: {
    serial: 0
  },
  computed: {
    incrementedSerial() {
      return ++this.serial
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="intro" style="text-align:center;">
  <h1>{{ incrementedSerial }}</h1>
</div>

【讨论】：

【解决方案2】：

这是一个赋值语句，在插值中是不允许的。

来自docs：

这些表达式将在所有者 Vue 实例的数据范围内被评估为 JavaScript。一个限制是每个绑定只能包含一个表达式，因此以下内容将不起作用：

{{ var a = 1 }}

您的代码大致相当于：

{{ serial = serial + 1 }}

以下是如何在循环中使用它进行计算：

new Vue({
  el: "#app",
  data() {
    return {
      serial: 0
    }
  }
});

<div id="app">
  <div v-for="i in 5">
    {{ i + serial }}
  </div>
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

【讨论】：