时间戳

首页 > 解决方案 > Vue js增量运算符（++）没有给出预期的输出

vue.js - Vue js增量运算符（++）没有给出预期的输出

问题描述

为什么下面的 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.jsincrement

解决方案

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

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>

推荐阅读