How to conditionally render inside a VueJS component's template?

Question

Vue.js

How to draw span id="wrong" when var wrong = true;

<div id="controls">
 <font-size-number target="headline" value="30" min="20" max="50"></font-size-number>
</div>

Vue.component('font-size-number', {
 props: [ 'target', 'min', 'max'],
 template: '<p><input type="number" @input="onChange" v-bind:id="`${target}-number`" class="set"><span id="wrong">Неверное значение</span></p>',
 methods: {
  onChange(e) {
   if (e.target.value < Number(this.min) | e.target.value > Number(this.max)) {
     var wrong = true;
     console.log(wrong);
   } 
  },
 },
});

new Vue({ 
  el: '#controls',
});

Answer 1

Is it possible to get a higher education without having a secondary? Obviously not. How about mastering a front-end framework without having basic knowledge of html / js? Judging by the code shown, you are not aware that the id attributes must have unique values ​​( <span id="wrong">in the component template - and if there are several instances of the component?), You are confused with operators - you used a bitwise OR where there should have been a logical one. Maybe we should wait with vue and tighten up the basics?
And if you answer directly to your question ... Well, hold on .