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

以你之姓@ 2022-11-26 07:58 645阅读 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 条评论，645人围观）

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

相关阅读

相关【Vue】多选框保留勾选数据

> 目录 > > 一、前言 > > 二、reserve-selection > > 三、清除某些选中项 > > 四、细节 > > ------------------

Love The Way You Lie/ 2024年03月25日 21:02/ 0 赞/ 95 阅读

相关使用jQuery实现复选框全不选功能

在网页开发中，复选框是一个常见的元素，用于让用户进行多项选择。有时候，我们可能需要提供一个按钮或者链接，让用户一键将所有复选框都取消选中。本文将介绍如何使用jQuery来实现这

本是古典何须时尚/ 2023年10月16日 14:48/ 0 赞/ 12 阅读

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

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

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

相关 GridView利用CheckBox复选框列实现单选功能

自Dev13.2开始，GridView提供了自带的复选框列，该功能能实现多选操作，方便了不少，那如果想把这个自带的复选框列做成单选，那就需要单独处理了。先补充一下，Grid

阳光穿透心脏的1/2处/ 2022年08月31日 06:28/ 0 赞/ 352 阅读

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

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

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

相关复选框

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

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

相关 JQuery实现复选框全选

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

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

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

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

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

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

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

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

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

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

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