Vue的表单组件之复选框

复选框分单独使用和组合使用。

复选框单独使用时：

<div id="app"><input type="checkbox" v-model="checked" id="checked"><label for="checked">选择状态：{{checked}}</label>  </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:'#app',data:{checked:false}})
</script>

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项。

这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

<div id="app"><input type="checkbox" v-model="checked"  value="学习"id="study"><label for="study">学习</label> <br> <input type="checkbox" v-model="checked"  value="读书"id="read"><label for="read">读书</label> <br> <input type="checkbox" v-model="checked"  value="运动"id="play"><label for="play">运动</label> <br> <p>选择的项是：{{checked}}</p></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>new Vue({el:'#app',data:{checked:['学习','读书']}})
</script>

Vue的表单组件之复选框相关推荐

C#ListView控件添加复选框并获取选中的数目
1.添加复选框:listView1.CheckBoxes = true; 2.选中listview并获取选中的数目: private void listView1_ItemChecked(object ...
ExtJs中定制日历控件——带复选框
效果图: 代码: /*********************日历组件部分**************************** begin */ var dateArray = new Array ...
html表单的复选框的值,关于表单：HTML复选框的checked属性的正确值是什么？
我们都知道如何在HTML中形成一个复选框输入: 我不知道 - 复选复选框的技术正确值是什么? 我看到这些都有效: 答案是无关紧要的吗? 我没有看到证据证明答案在规范中标记为正确: Checkboxes ...
VUE项目中获得多个复选框 checkbox 选中的值（jquery）+ 解决 Uncaught TypeError: Cannot read property ‘push‘ of undefine
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 表格生成后第一列是复选框,效果: 表格是直接循环展示的后台返回数据,代码写法: 2. 得复选框 ...
Vue的表单组件之下拉框
下拉框分为单选和多选两种方式. <div id="app"><select v-model="selected"><option ...
Vue的表单组件之单选按钮
单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为真时选中,为假时不选. <div id="app"><input typ ...
elementui树形复选框_Element-ui表格树形控件结合复选框实践
Element-ui是现在国内用得比较多的ui框架,其table组件提供了多选以及树形数据的功能,但却没有提供将两者结合的功能,我们先来看下面的图片,本文将介绍以下的功能如何实现以及其中的一些踩坑点. ...
vue基于element-ui的三级CheckBox复选框
1 <template> 2 <div class="deliverySetting"> 3 <div class="deliverySet ...
PHP如何判断提交表单中多个复选框是否选中？
1.name命名为数组,例如"select[]" 2.例如这样选: 3.在后台使用$_POST['select']得到数组 4.然后就可以看到得到的数组了本文转自ZH奶酪博客园博 ...

Vue的表单组件之复选框

Vue的表单组件之复选框相关推荐

最新文章

热门文章