computed是Vue中非常重要的一個概念，它可以讓我們在模板中動態地計算屬性值。computed屬性本質上是一個依賴于響應式屬性的緩存值，只有當依賴的屬性發生變化時，computed才會重新計算值。

在Vue中，我們可以使用computed屬性配合style來動態地修改元素的樣式，這種方式可以替代一些繁瑣的邏輯處理。

// Vue組件中定義一個computed屬性
computed: {
bgColor: function() {
if (this.count >0) {
return "red";
} else {
return "blue";
}
}
},
// HTML中使用computed屬性

上面的代碼中，我們定義了一個名為bgColor的computed屬性，它會根據this.count的值返回不同的背景顏色。然后我們可以在HTML中使用computed屬性來設置元素的背景顏色。

computed屬性的優點在于它會根據響應式屬性的變化自動更新計算結果，這是常規方法所做不到的。

// 在組件中使用watch監聽屬性變化
watch: {
count: function(val) {
if (val >0) {
this.bgColor = "red";
} else {
this.bgColor = "blue";
}
}
},
// HTML中使用data中定義的屬性

如上代碼所示，如果我們使用watch來監聽屬性變化，那么我們就需要手動修改bgColor的值來更新元素樣式。這種方式雖然也可行，但是很麻煩，而且容易出錯。

而使用computed屬性來動態的計算樣式值，則可以讓我們的代碼更清晰簡潔，也更加可讀。