The task is simple, if the goods are in stock, there should be a message "In Stock", and vice versa. You can do this through v-if like this.

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>

And it is possible through observation of the property and redefinition of the value displayed inside the block. So:

 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>

With the button I had to add to show how the value changes. Which approach is more correct. In the 1st it is embarrassing to add or remove a DOM node (as I understand it, a span that does not meet the condition is removed from the DOM

    1 answer 1

    Let's start by this.inStock = this.inStock ? false:true; line this.inStock = this.inStock ? false:true; this.inStock = this.inStock ? false:true; on this.inStock = !this.inStock; And the first approach is much less verbose and more understandable. Yes, the DOM node is removed and added. To just hide use v-show . By the way, you can remove watch and make the message a computed property, returning the desired text depending on this.inStock . Then the template will be as in the second version.