Javascript Vue.js使用computed添加类_Javascript_Vue.js

Javascript Vue.js使用computed添加类

javascript vue.js

Javascript Vue.js使用computed添加类,javascript,vue.js,Javascript,Vue.js,我是Vue.js的初学者。我想添加一个依赖于条件的类。当答案大于25时，我想移除成功类，但颜色不变。。。你能给我一些建议吗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-w

我是Vue.js的初学者。我想添加一个依赖于条件的类。当答案大于25时，我想移除成功类，但颜色不变。。。你能给我一些建议吗

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Caliculator</title>
   </head>
   <body>
      <div id="app">
         <input type="number" name="num1" v-model.number="num1" /> +
         <input type="number" name="num2" v-model.number="num2" /> +
         <input type="number" name="num3" v-model.number="num3" /> +
         <input type="number" name="num4" v-model.number="num4" /> +
         <input type="number" name="num5" v-model.number="num5" /> =
         <span class="error" :class="classObject">{{ answer }}</span>
      </div>

      <style>
         .success {
            color: green;
         }
      </style>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
         var app = new Vue({
            el: "#app",
            data: {
               num1: 0,
               num2: 0,
               num3: 0,
               num4: 0,
               num5: 0,
               classObject: {
                  success: true,
               },
            },
            computed: {
               answer: function () {
                  return (
                     this.num1 + this.num2 + this.num3 + this.num4 + this.num5
                  );
               },
               classObject: function () {
                  if (this.answer > 25) {
                     success: false;
                  }
               },
            },
         });
      </script>
   </body>
</html>


校准器
+
+
+
+
=
{{答案}
.成功{
颜色：绿色；
}
var app=新的Vue({
el:“应用程序”，
数据：{
num1:0，
num2:0，
num3:0，
num4:0，
num5:0，
类对象：{
成功：没错，
},
},
计算：{
答:功能(){
返回(
this.num1+this.num2+this.num3+this.num4+this.num5
);
},
类对象：函数（）{
如果（这个答案>25）{
成功：错误；
}
},
},
});

我不是vue开发人员

但你可以试试这个：

<span class="error" v-bind:class="classObject">{{ answer }}</span>


 classObject: function () {
    return {
      success: this.answer > 25 ? true : false ,

    }
  }

{{answer}
类对象：函数（）{
返回{
成功：这个。答案>25？对：错，
}
}

类绑定在这里更合适：

newvue({
el:“应用程序”，
数据：{
num1:0，num2:0，num3:0，num4:0，num5:0
},
计算：{
答:功能(){
返回（this.num1+this.num2+this.num3+this.num4+this.num5）；
}
},
});
.success{color:green；}

+
+
+
+
=
{{答案}
这就是为什么，因为您正在尝试改变对象中的成功。在这里vue.set应该可以帮助您。但有更简单的解决办法。尝试以下方法：
:class="answer > 25 ? '' : 'success'"

颜色不会改变，因为classObject是一个定义良好的计算对象，但也在数据部分。因此它永远不会更新！！！
将其从数据部分删除，然后它就可以工作了
编辑：
正如@keskinsaf所注意到的，您的computed属性中还有一个错误，它缺少一个return语句。
=>固定在下面的代码中：
  <script>
     var app = new Vue({
        el: "#app",
        data: {
           num1: 0,
           num2: 0,
           num3: 0,
           num4: 0,
           num5: 0,
           classObject: {     //  remove
              success: true,  //  these
           },                 //  lines
        },
        computed: {
           answer() {
              return this.num1 + this.num2 + this.num3 + this.num4 + this.num5;
           },
           classObject() {
              return { success: this.answer <= 25 }; // add return statement
           },
        },
     });
  </script>

如果你想让它更简洁，你可以做return{success:this.answer>25}计算属性声明函数应返回一个值。请考虑一下。所以，你的答案也行不通。请把它修好。这可能会误导新来者。问题是“…通过使用计算”你为什么要回答其他问题？有很多方法可以做到这一点，但是OP问到使用computed
——而你展示的代码并不正确……嗨，@keskinsaf，我不明白你评论的意思。如果classObject
在同一个组件中被声明为data
和computed
，那么classObject
将不会是被动的（我刚刚验证过）=>我不明白为什么我的答案不正确，你能解释一下吗？你说得对，但我说的不同。您忘记了在classObject
函数中返回一些内容。请检查并检查您的代码。我想你的目的是写这样的东西：如果（this.answer>25）返回{success:false}
。嗨，@keskinsaf，我的错，你完全正确，我只是复制过去而没有意识到计算属性中没有返回=>我刚刚修复了我的答案问题是：“…使用计算”你为什么要回答其他问题？有很多方法可以做到这一点，但OP询问了使用computed
:class="{ 'success': answer <= 25 }"