Javascript 对计算的Vue属性使用条件

我在一个站点中使用Vue，我有一个工作按钮，可以更改状态（如果按钮显示为“暂停”，然后单击该按钮，则会更改为“继续”，并更改颜色）

这里的按钮功能在页面上运行得非常好，但我遇到了一个问题，使它与同一页面上的值对齐。我有另一个函数，它有一个名为

details

的对象，还有一个名为

status

的值，可以是“H”或“P”

我现在需要做的就是解决这个问题，这样在页面加载时，如果状态为“H”，按钮会显示“Resume”，如果状态为“p”，按钮会显示“Pause”（基本上，如果状态为“H”，则显示“Pause”！this.isOpen，如果状态为“p”，则显示“this.isOpen”）

如何更改页面加载的状态，以便在状态为H时this.isOpen为false，而在状态为p时this.isOpen为true？我不能在数据返回中执行if/条件，但也许我可以以某种方式使用计算属性

<button class="btn btn-block" :style ="{ color: pauseButton.textColor, backgroundColor:pauseButton.background, border:none, borderRadius: .15 }" v-on:click="pauseTask" type="button" role="button" id="" aria-expanded="false">
  {{ pauseButton.text }}
</button>

data() {
    return {
        details: [],
        pauseButton: {
            text:'Pause',
            textColor: '#6c757d',
            background: '#BDE5F8'
        },
        isOpen: true,
    }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;

      //this is the new line that doesn't work the way I need
      if(this.details[0].status === 'H'){
        !this.isOpen;
      }

      this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
      this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
      this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
    },

{{pauseButton.text}
数据（）{
返回{
详情：[]，
暂停按钮：{
文本：'暂停'，
textColor:“#6c757d”，
背景：“#BDE5F8”
},
是的，
}
},
pauseTask:function（）{
this.isOpen=！this.isOpen；
//这是一条不符合我需要的新线路
如果（此.details[0]。状态=='H'）{
！this.isOpen；
}
this.pauseButton.text=this.isOpen？'Pause'：'Resume'；
this.pauseButton.background=this.isOpen？“#BDE5F8”：“#FEEFB3”；
this.pauseButton.textColor=this.isOpen？“#6c757d”：“#ff6e6e”；
},

只需将

isOpen

值指定给

！仅当isOpen在
装入的
或
创建的
生命周期方法中为“H”时，isOpen才可用

mounted(){
  if(this.details[0].status === 'H'){
    this.isOpen = !this.isOpen;
  }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;

      this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
      this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
      this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
    },

如果您的
details
是一个数组，并且您要循环它来创建多个元素，那么您应该遵循下面的方法来简化它


newvue({
el:“#应用程序”，
数据（）{
返回{
详情：[{
状态：“H”
}, {
状态：“H”
}, {
状态：“P”
}]
}
},
方法：{
切换任务（d）{
d、 状态=（d.status=='H'？'P'：'H'）
}
}
});
.btn{
边界：无；
边界半径：.15；
保证金：4px0；
填充：4px10px；
}
.btn.resume{
颜色：#ff6e6e；
背景色：#FEEFB3；
}
暂停{
颜色：#6c757d；
背景色：#BDE5F8；
}

状态：{d.Status}
{{d.status='H'？'Resume'：'Pause'}
但这并不能解决页面加载问题。页面加载状态为“H”，但从数据返回中删除信息时不会显示该按钮。当我让它显示，然后点击不改变确定我现在看到你的编辑。我认为这是有道理的，但这会如何影响页面加载时的数据返回？很抱歉，我没有听到您说过要更改页面加载时的状态。在页面加载时，Vue.js会触发
创建的
和
装载的
生命周期方法。您可以在那里检查并写入逻辑。我更改了上面的代码。是的，这是正确的，但是对于数据返回中的pauseButton，我该怎么办？文本和颜色也取决于P或H，因此
详细信息
被构造为一个数组，但我在那里只返回一件事（因此[0]），但我认为这仍然有效