javascript-基于Vue.js中复选框输入的条件渲染
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-基于Vue.js中复选框输入的条件渲染,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2391字,纯文字阅读大概需要4分钟。
内容图文
![javascript-基于Vue.js中复选框输入的条件渲染](/upload/InfoBanner/zyjiaocheng/669/11ae146eb19045d1bfa2459daa963c53.jpg)
我正在尝试根据Vue中的用户输入有条件地呈现表单元素,但进展不顺利.我知道如何使用VanillaJS或jQuery来做到这一点,但是我正在努力将这些知识转化为使用Vue的内置条件指令.我正在将单文件组件与来自vue-cli的webpack模板一起使用.
从我的< template>中:
<form autocomplete="off" name="loadDeets" id="loadDeets" class="loadDeets">
<div class="form-group row">
<label>Date</label>
<flat-pickr v-model="date"
:config="{dateFormat: 'l, F j'}"
class="form-control"
placeholder="Select date"
name="date"></flat-pickr>
</div>
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr v-model="time"
:config="config"
class="form-control"
placeholder="Select time"
name="time1"></flat-pickr>
</div>
<div class="form-group col right">
<label>Time</label>
<flat-pickr
:config="config"
class="form-control"
placeholder="Select time"
name="time2" v-show="document.getElementById('apptCheck').checked"></flat-pickr>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="apptCheck">
<label class="form-check-label" for="apptCheck">
Appointment?
</label>
</div>
</form>
这完全破坏了页面的组件渲染.因此,然后我尝试根据Vue文档中的此页面使用v模型. https://vuejs.org/v2/guide/forms.html#v-model-with-Components
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr v-model="time"
:config="config"
class="form-control"
placeholder="Select time"
name="time1"></flat-pickr>
</div>
<div class="form-group col right">
<label>Time</label>
<flat-pickr
:config="config"
class="form-control"
placeholder="Select time"
name="time2" v-show="vm.checked == true"></flat-pickr>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="checked" id="apptCheck" v-model="checked">
<label class="form-check-label" for="apptCheck">
Appointment?
</label>
</div>
不幸的是,这也破坏了页面.
我不完全确定如何从这里继续.我没有正确考虑这个吗? v-if / v-show是否不打算与其他元素的输入一起使用?
解决方法:
第二个示例是执行此操作的正确方法,您永远不需要在Vue中通过ID访问元素.您可以访问组件中的所有变量,因此不需要vm.,只需v-show =“ checked”:
<flat-pickr
:config="config"
class="form-control"
placeholder="Select time"
name="time2" v-show="checked"></flat-pickr>
确保还实例化签入数据功能.您可以在开始数据中将其设置为true而不是将value =“ checked”放在该元素上,并且v-model =“ checked”会自动对其进行检查.
内容总结
以上是互联网集市为您收集整理的javascript-基于Vue.js中复选框输入的条件渲染全部内容,希望文章能够帮你解决javascript-基于Vue.js中复选框输入的条件渲染所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。