title: How to display input input fields on condition in VueJs
body: <p>Below is my html code with Vue instance. I need to display the input fields on condition using a value that i will get from database. I have chosen to define the value manually to try it out</p>
  
  <pre><code>    &lt;div id="codeTest"&gt;
          &lt;input id="input1" type="text" /&gt;
          &lt;input id="input2" type="text" /&gt;
  
          {{$data}}
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
       var inputVM= new Vue({
           el:"#codeTest",
           data:function(){
               return{
                   value:1
               }
           },
           created:function(){
               this.showInput();
           },
           methods:{
               showInput:function(value){
                   if(value==1){
                       document.getElementById("input1").style.display = '';
                       document.getElementById("input2").style.display = 'none';
                   }
                   else if(value==2){
                       document.getElementById("input1").style.display = '';
                       document.getElementById("input2").style.display = '';
                   }
               }
           }
       })
  
     `I am getting two input field instead of one. How do i go about it? Thanks in advance` 
  
  
              //document.getElementById("test").style.display = 'none';
  
  
      &lt;/script&gt;
  </code></pre>