Fatal编程技术网
  • vue.js/
  • Vue.js Vue js增量运算符（+；+；）未提供预期输出

Vue.js Vue js增量运算符（+；+；）未提供预期输出

vue.js

Vue.js Vue js增量运算符（+；+；）未提供预期输出,vue.js,increment,Vue.js,Increment,为什么下面的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;">

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


{{++serial}}
var app=新的Vue({
el:“#简介”，
数据：{
序列号：0
}
});
我需要一个解释。我的预期输出是1。如何解决这个问题？

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

从：

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


{{var a=1}}
您的代码大致相当于：

{{serial=serial+1}
以下是如何在循环中使用它进行计算：

newvue({
el:“应用程序”，
数据（）{
返回{
序列号：0
}
}
});


{{i+serial}}

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



var-app=新的Vue({
el:“#简介”，
数据：{
序列号：0
},
计算：{
递增序列号（）{
返回++这个.serial
}
}
});


{{incrementedSerial}}