任务很简单,如果商品有货,应该有“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
