v-model绑定数组练习_v-model练习题-程序员宅基地

技术标签: 前端  

用v-model绑定一个数组在多选上时 会按照多选的选中状态在数组中添加或删除该选项的value值`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
       <button :check="check" @click="ch">全选</button>
       <ul>
           <li v-for="(item,index) in arr" :key="index">
               <input type="checkbox" name="" id="" :value="item" v-model="arr1">
               {
    {
    item}}
           </li>
       </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        var vm = new Vue({
    
            el : ".app",
            data:{
    
               arr:["a","b","c","d"],
               check : false,
               arr1:[]
            },
            watch: {
    
                check (){
    
                    // this.ckeck ? this.arr1 = ["a","b","c","d"] : this.arr1 = [];
                    if(this.check){
    
                        this.arr1 = ["a","b","c","d"]
                    }else{
    
                        this.arr1 = [];
                    }
                  
                }
            },
            methods: {
    
                ch (){
    
                    this.check = !this.check;
                    console.log(this.check)
                }
            }
        })
    </script>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_55041880/article/details/118328794

智能推荐

用python画一个五角星的代码,用python画星号三角形-程序员宅基地

文章浏览阅读315次,点赞7次,收藏7次。大家好,本文将围绕用python画一个五角星的代码展开说明,用python画星号三角形是一个很多人都想弄明白的事情,想搞清楚python绘制一个五角星需要先了解以下几个事情。大家好,小编为大家解答python百元买百鸡问题怎么算的问题。很多人还不知道百钱买百鸡raptor流程图制作,现在让我们一起来看看吧!

UE4制作插件的插件神器pluginCreator_electric plugin ue4-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏14次。UE4制作插件的插件神器 看近来,很多使用UE4插件的同学,都苦恼于UE4插件,官方给了好多资料,但是还是无从下手啊。下面这个是官方插件说明:https://docs.unrealengine.com/latest/INT/Programming/Plugins/index.html有人看完还是一头雾水,从哪里开始呢。Wiki有人写了个说明,照着可以做,但是各种说明:官_electric plugin ue4

6位数码管电子时钟c语言程序,利用AT89C51单片机设计简易电子钟(六位),通过8位LED数码管实现时间显示;系统可以通过三个按键实现时间...-程序员宅基地

文章浏览阅读1.7k次。利用AT89C51单片机设计简易电子钟(六位),通过8位LED数码管实现时间显示;系统可以通过三个按键实现时间 常见问题汇编可以么LED_1 EQU 30HLED_2 EQU 31HLED_3 EQU 32HLED_4 EQU 33HLED_5 EQU 34HLED_6 EQU 35HLED_7 EQU 36HLED_8 EQU 37HTIMER EQU 38HMODE EQU 39H ;模式判断..._电子钟3个按钮

压缩命令tar详解_tar -czvf-程序员宅基地

文章浏览阅读1.2k次。压缩命令tar详解在Linux中常见的压缩包格式为*.tar.gz *.zip *.tar *.bz2 *.gz *.tgz压缩格式:tar [可选项] [压缩文件名] [需要压缩的文件]参数: -z 通过gzip压缩或者解压 -c 创建新的tar包 -v 显示详细的tar命令的压缩过程 -f 指定压缩文件的名称 -x 解开tar包 -C(大写) 指定解压的目录路径 --exclude=PATH 打包时排除不需要_tar -czvf

LTP--linux稳定性测试 linux性能测试 ltp压力测试 ---IBM 的 linux test project_ltp最新版压测linux-程序员宅基地

文章浏览阅读3w次,点赞5次,收藏47次。今天考虑如何将这个变态的系统(说它变态,一点都不过,因为是debian和Ubantu 杂交的,设计者都是这么说的)的功能测试程序化,结果论坛上有人建议考虑 IBM 的 linux test project 下载下来,安装了十来分钟,最后运行时报错,安装不准确,糟糕的变量名等,奇怪呀,安装挺顺利的结果不能用,这系统,哎,就是特殊呀!不管了,IBM 的 linux test project 也_ltp最新版压测linux

企业微信公众号自定义消息模板_企业微信消息模板-程序员宅基地

文章浏览阅读2.8k次。1.首先打开消息模板(如果没有需要添加):广告与服务-消息模板。基本所有的内容都要填写,包括参考示例,否则“提交”按钮不可用。自定义消息模板是有这个功能的,但是很隐蔽,特此记录(,提交后记录到哪里了,我现在还不知道。2.自定义模板:模板库-类目模板(3.打开“新增模板”_企业微信消息模板

随便推点

Unity3D 烘焙参数自我实践_unity灯光烘培建议参数-程序员宅基地

文章浏览阅读1.5k次。Indirect Resolution 间接光采样:数据越大,对间接光采样越多,对物体边缘影响越大,这个影响两个物体之间的阴影、溢色,如果数值很大,周围就会成为白色(官网解释说 只能在 实时光渲染 开始时才起作用) LightMap Resolution: 烘焙贴图采样:值越大,效果越好,场景越干净;相应的烘焙时间会延长Directional Mode: ..._unity灯光烘培建议参数

Android studio 命令行编译_android studio 命令行 编译-程序员宅基地

文章浏览阅读2.6k次。Android studio 编译ReactNative项目时候报错. 报错提示乱码.打开终端运行gradlew compileDebugSources --stacktrace -info这时可以显示中文的问题了./gradlew./gradlew build --stacktrace -info然后再执行进行编译gradle buildgradle tasks //查看android gradle的所有任务gradle compileReleaseSource //生成debug apk ,在build_android studio 命令行 编译

吲哚菁绿ICG-Amine/NH2荧光标记和成像1686147-55-6_icg吲哚菁绿色荧光颜色怎么观察-程序员宅基地

文章浏览阅读679次。ICG-Amine是一种荧光染料,ICG-Amine具有良好的荧光性能,可用于生物医学研究中的荧光标记和成像。ICG-Amine的物理性质如下:化学式:C47H56N4O4S,分子量为773.04,外观:深绿色粉末溶解性:易溶于水和甲醇,不溶于乙醇和乙醚;荧光发射峰:约为880 nm激发波长:约为780 nm;ICG-Amine的荧光性能稳定,荧光强度高,且对生物体不具有毒性和免疫原性,因此被应用于生物医学领域的荧光标记和成像研究中,如血管造影、光动力治疗等。CAS号:1686147-55-6。_icg吲哚菁绿色荧光颜色怎么观察

用GD32替换正点原子STM32F103ZET6_正点原子gd32-程序员宅基地

文章浏览阅读1.4w次,点赞59次,收藏50次。你是个成熟的工程师了,要学会偷偷用GD32换室友的STM32芯片_正点原子gd32

嵌入式系统移植——Bootloader移植_openharmony移植中的bootloader-程序员宅基地

文章浏览阅读941次。命令类型:环境变量、数据传输、存储器访问、加载运行printenv:pri----打印所有环境变量setenv:set------设置环境变量值saveenv:save---保存环境变量值bootdelay:进入自启动模式的倒数计时gatewayip:网关地址ipaddr:设备网络地址----板子netmask:子网掩码serverip:服务端地址---linux虚拟机bootcmd:进入自启动模式后,uboot要执行的命令。_openharmony移植中的bootloader

UIDeviceOrientation与UIinterfaceOrientation以及屏幕旋转的方式_xcode3 uiinterfaceorientation-程序员宅基地

文章浏览阅读1.5k次。在日常开发过程中,经常会遇到转屏的需求,最近遇到一个转屏相关的bug,顺带着总结下iOS端实现转屏需要做的事情。首先需要明确两个概念,设备方向(UIDeviceOrientation)和视图方向(UIInterfaceOrientation)UIDeviceOrientation:不受锁定屏幕方向的影响,通过[UIDevice currentDevice].orient_xcode3 uiinterfaceorientation

推荐文章

热门文章

相关标签