如何在VueJs中的条件下显示输入输入字段

Question

下面是我的带有Vue实例的html代码。我需要使用从数据库中获取的值来显示输入条件。我选择手动定义值来尝试

    <div id="codeTest">
        <input id="input1" type="text" />
        <input id="input2" type="text" />

        {{$data}}
    </div>
    <script type="text/javascript">
     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';


    </script>

Answer 1

请参考Vue SizedBox(height: MediaQuery.of(context).size.height / 3), https://vuejs.org/v2/guide/conditional.html

MediaQuery.of(context).size.height