任务很简单，如果商品有货，应该有“In stock”的信息，反之亦然。你可以像这样通过 v-if 来做到这一点。
new Vue({
el: "#app",
data: {
inStock: true
}
})<style>
span {
font-size: 30px;
font-weight: 700;
}
</style><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<span v-if="inStock">В наличии</span>
<span v-else>Нет в наличии</span>
</div>并且可以通过监视属性并重新定义块内显示的值。所以：
new Vue({
el: "#app",
data: {
message: "В наличии",
inStock: true
},
watch: {
inStock: function () {
if (this.inStock) {
this.message = "В магазине";
}
else {
this.message = "Нет в наличии";
}
}
},
methods: {
change: function () {
this.inStock = this.inStock ? false:true;
}
}
})span {
font-size: 30px;
font-weight: 700;
}
button {
display: block;
}<div id="app">
<span>{{message}}</span>
<button @click="change">сменить состояние</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>我必须添加一个按钮来显示值如何变化。哪种方法更正确。第一种，尴尬的是需要添加或删除一个DOM节点（据我了解，从DOM中删除一个不符合条件的span
this.inStock = this.inStock ? false:true;让我们从用AND替换字符串开始this.inStock = !this.inStock;。第一种方法更简洁，更易读。是的，DOM 节点被移除和添加。只是隐藏使用v-show。顺便说一句，您可以删除watch并使message成为计算属性，根据this.inStock返回所需的文本。然后模板将与第二个选项一样。