vue.js create input field when switch is on

I am new in Vue. I have a switch input which shows Off/On option. I want to create input field when switch is on and I want to remove input field when switch is Off. Related part of my code is here:

<label class="switch">
   <input class="switch-input" type="checkbox" />
   <span class="switch-label"  data-on="On" data-off="Off"></span>
   <span class="switch-handle"></span>
</label>

<el-input
   v-validate="'required'"
   name="name"
   placeholder="QR code"
   v-model="form.qr"
></el-input>

Can you help me? Thanks.

Answer

add v-model to switch and use v-if to change show/not show. here is most simple code. you can customize it.

<input type="checkbox" id="checkbox" v-model="checked">
<input v-if="checked">