vue实现复选框默认勾选功能案例

以你之姓@ 2022-11-26 07:58 575阅读 0赞

**一、概述**

1.  最近在学习vue相关知识。通过菜鸟教程中单选框、复选框渲染的代码测试之后，自己也写了一下代码来实现复选框如何默认勾选的功能；

**二、案例介绍**

1.  实现思路  
    定义一个对象数组来存储id值、和中文名称，除此之外，再定义一个对象，对象里面放置一个数组来存储想要被勾选的id集合。
2.  代码实现

<template>
        <div id="computed_props" class="cls2">
             <label v-for="post in postIdList" :key="post">
                 <input type="checkbox" :value="post.postId" v-model="user.postIdList" >{ { post.postName}}
             </label>
    </div>
    </template>
    <script>
    export default { 
      name: 'ComputedProp',
      data () { 
        return { 
          postIdList: [{ 'postId': 0, 'postName': '董事长'}, { 'postId': 1, 'postName': '董事长秘书'}],
          user: { 
            'name': '测试管理者',
            postIdList: [1, 2]
          }
        }
      },
      methods: { 
      },
      computed: { 
      },
      watch: { 
    }
    </script>
    <style>
    </style>

1.  页面效果  
    ![在这里插入图片描述][20200811122733995.png]
2.  代码分析  
    主要是通过 :value和v-model双向绑定完成复选框的默认勾选。首先通过label标签中的v-for循环遍历postIdList对象数组，:value来绑定循环过程中每次取出的对象id，进而与user对象中postIdList数组中id值进行匹配，如果含有，就默认勾选；不含有，就不勾选；

[20200811122733995.png]: /images/20221124/97d5b2b58c5147b78df734a0bb278e98.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue实现复选框默认勾选功能案例

一、概述 1. 最近在学习vue相关知识。通过菜鸟教程中单选框、复选框渲染的代码测试之后，自己也写了一下代码来实现复选框如何默认勾选的功能；二、案例介绍 1. 实现

以你之姓@/ 2022年11月26日 07:58/ 0 赞/ 576 阅读

相关 JavaScript经典案例：复选框多选操作

效果展示： ![在这里插入图片描述][20201121164401950.jpg_pic_center] HTML代码 <form action="" metho

旧城等待，/ 2022年11月20日 01:59/ 0 赞/ 287 阅读

相关 van-checkbox 复选框功能

van-checkbox 复选框功能 ![在这里插入图片描述][20210309231931248.gif] 涉及的功能点：动态设置弹出框的最大高度

落日映苍穹つ/ 2022年10月23日 08:18/ 0 赞/ 605 阅读

相关 Vue中自定义列表复选框和全选框-案例

效果图 ![20210914144329626.gif][] 主要代码实现 <div class="isck" @click="btnCheck(ite

你的名字/ 2022年09月11日 07:29/ 0 赞/ 222 阅读

相关 js_案例_复选框全选功能

复选框全选功能 <label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label>

ゝ一世哀愁。/ 2022年05月25日 05:47/ 0 赞/ 217 阅读

相关复选框

![70][] package tu; import java.awt.BorderLayout; import java.awt.B

「爱情、让人受尽委屈。」/ 2022年05月19日 08:10/ 0 赞/ 334 阅读

相关 JQuery实现复选框全选

首先一种最low的方法 $("checkAll").click(function(){ var $checkRows = $("input[

冷不防/ 2022年05月14日 02:09/ 0 赞/ 316 阅读

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

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

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

相关 JavaScript 复选框全选功能案例

功能描述实现一个多栏目复选框的全选，全不选和反选功能。 ![在这里插入图片描述][20190418123707102.png] 分析 HTML页面：四

Love The Way You Lie/ 2021年06月24日 16:10/ 0 赞/ 523 阅读

相关 Vue实现复选框,批量操作

声明 selectIds 数组： data: { whiteCardList: [], selectIds: [] }, 获取列...

你的名字/ 2021年03月14日 03:18/ 0 赞/ 653 阅读