Задача простая, если товар на складе, должно быть сообщение "В наличии", и наоборот. Можно это делать через 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>
С кнопкой пришлось добавить чтобы показать как меняется значение. Какой подход более правильный. В 1-м смущает, что надо добавлять или убирать узел DOM(как я понимаю, span не соответствующий условию, удаляется из DOM