Vue.js 如何使vue属性与vue中的另一个属性具有条件关系？

也许这太基本了，但现在我都有点呆头呆脑了。 我正在研究VueJS，我遇到了一个问题

我有这个

，它的样式绑定到一个Vue对象

<h3 :style="headerStyleP2" class="p2 font-ranchers col-xs-6 col-sm-12">
   P2
</h3>

你们可以看到我用的是三元数。这是一种工作，但它不是动态的。当我刷新页面时，它是灰色的，但当我更改input1值时，它从不变成蓝色。（它绑定到另一个输入-这一个工作得很好。）

---

我觉得我做得不对。如何使其工作？

将

头样式p2

改为计算属性，这样它将始终使用最新的

this.input1值重新计算。更多信息

。。。

计算：{
headerStyleP2（）{
返回{color:this.input1？“蓝色”：“灰色”}；
}
}


这里有一个。
将
头样式p2
改为计算属性，这样它将始终使用
this.input1
的最新值重新计算。更多信息

。。。

计算：{
headerStyleP2（）{
返回{color:this.input1？“蓝色”：“灰色”}；
}
}


这是一个。
请为它做一个计算属性。请为它做一个计算属性。我想说一件事，先生-请继续做这个非常有帮助的人。你做了一张gif真是太好了。非常感谢你。干得漂亮，不客气。只是尽我所能去帮助一个同事。祝你好运！我想说一件事，先生-请继续做这个非常乐于助人的人。你做了一张gif真是太好了。非常感谢你。干得漂亮，不客气。只是尽我所能去帮助一个同事。祝你好运！
var notas = new Vue({
  el: '#notas',
  data: {
    obs1: "Digite a nota da P1",
    obs2: "",
    obs3: "",
    input1: "",
    input2: "",
    input3: "",
    inputStyle: {
      color: "white"
    },
    headerStyleP2: {
      color: this.input1 ? "blue" : "grey"
    },
    headerStyleP3: {
      color: "aqua"
    }
  }
})