Vue的表单组件之复选框

蔚落 2023-10-18 08:59 19阅读 0赞

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

复选框单独使用时：

<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>

![Image 1][]

组合使用时，也是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>

![Image 1][]![70][]

[Image 1]: 
[70]: https://img-blog.csdn.net/20180919203452338?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

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

复选框分单独使用和组合使用。复选框单独使用时： <div id="app"> <input type="checkbox" v-model="chec

蔚落/ 2023年10月18日 08:59/ 0 赞/ 20 阅读

相关 Vue的表单组件之单选按钮

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。 <div id="app"> <inp

红太狼/ 2023年10月18日 08:58/ 0 赞/ 21 阅读

相关表单界面：改变单选框和复选框的样式

单选框效果： ![在这里插入图片描述][20190926105836468.gif] 单选框的样式是不可改变的，实际上的改变样式只是寻找别的东西来替换单选框。

曾经终败给现在/ 2023年08月17日 15:23/ 0 赞/ 143 阅读

相关【Jquery】- 表单、表格、复选框

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] Jquery 表单Form操作界面 <

绝地灬酷狼/ 2022年10月02日 09:51/ 0 赞/ 249 阅读

相关 jQuery 单选框/复选框美化

对于前端萌新来说，美化表单是个痛苦的事情，通常都是去寻找插件这种逃避的办法，其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出，下面的示例源码将体现基础篇

我不是女神ヾ/ 2022年05月10日 00:08/ 0 赞/ 518 阅读

相关 vue中el-tree实现单选复选框

vue中el-tree实现单选复选框遇到的问题使用vue的element框架时el-tree时，当填入复选框时，不能单选父节点解决办法结

你的名字/ 2022年04月13日 04:24/ 0 赞/ 421 阅读

相关 AngularJS单选、复选框

　　在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例：一.AngularJS radio单选实例　　在页面上有几个项目名称，

清疚/ 2022年04月06日 10:51/ 0 赞/ 678 阅读

相关 vue封装复选框组件

前言 > 根据[百度前端技术学院2018 MVVM 学院][2018 MVVM] 中的[ 2.5 表单实现Input、Checkbox组件][2.5 _Input_Che

╰+攻爆jí腚メ/ 2022年01月31日 15:27/ 0 赞/ 827 阅读

相关 ExtJS表单之复选框

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1.复选框的值都是直接指定。 E

落日映苍穹つ/ 2022年01月14日 18:51/ 0 赞/ 386 阅读

相关复选框checkbox,单击行单选,单击复选框也单选

$('table').on('click', 'tr', function (e) { //选择checkbox判断事件 if (e.t

太过爱你忘了你带给我的痛/ 2021年09月15日 15:10/ 0 赞/ 878 阅读