首页 > 其他分享 >vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名

vue 里面通过v-for循环出来多个相同样式的div,根据index值给每个div添加不同的id名

时间:2022-12-14 17:01:39浏览次数:58  
标签:index vue 盒子 循环 div id

直接上代码

 

两个要点:

1、v-for循环创建盒子

2、使用函数给盒子id赋值

 

 

函数方法

 

 

标签:index,vue,盒子,循环,div,id
From: https://www.cnblogs.com/Timeouting-Study/p/16982639.html

相关文章

  • Vuex 详解
    state:import{Module,VuexModule}from'vuex-module-decorators'@ModuleexportdefaultclassVehicleextendsVuexModule{wheels=2}等同于下面的代......
  • 基于Springboot+Mybatis+mysql+vue宠物领养网站1
    @目录一、系统介绍二、功能展示1.主页(普通用户)2.登陆、注册(普通用户)3.宠物大全(普通用户)4.宠物详情(申请领养、点赞、评论)(普通用户)5.我的申请(普通用户)6.个人信息(普通用户......
  • vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
    公司UI设计的拟态框弹窗跟ElementPlusUI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。这个需求最主要的是要通过方法去调用。为了像el-messagebox......
  • Codeforces Round #837 (Div. 2) A-C
    A.HossamandCombinatorics题意:给定一个长度为n的序列,求两个不同位置的数的差值等于所有数差值的最大值的数对数量。分析:显然排序后取最大最小就是差的绝对值最大,再......
  • vue-cli 和 vite 全局变量定义和使用
    vue-clivue.config.js//第一步,在vue.config.js中定义//注意:定义的变量必须是APP_开头。这是vue-cli的硬性规范。process.env.APP_VERSION=require('./pack......
  • vue serve 部署 步骤说明
    1.构建镜像dockerbuild-t镜像名称:镜像TAG--build-argURL=http://localhost:8081--build-argPORT=2000--build-argSSL_PORT=443-fDockerfile.如果......
  • 实现一个可拖拽的div(vue3写法)
    constchatbox=ref();constdragx=(el)=>{letoDiv=chatbox.value;//当前元素letdisX=el.clientX-oDiv.offsetLeft;letdisY=el.clientY-oDi......
  • vue查漏补缺
    1.动态参数属性::[]<div:[atrr]="width:100%"></div><script>exportdefault{data:()=>({attrr:’class‘})}</script>......
  • vue3组件el-dialog提取
    父组件:1<template>2<divclass="auto-wrap">3<divclass="content-left">45<el-form:model="addReportForm"label-width="120px">......
  • Vue笔记5--生命周期
    生命周期钩子​ 因为只是为了给毕设做前端,我选择理解即可。但是其实整个Vue的精髓就在整个地方。有时间可以看看尚硅谷相关教程的生命周期部分p48-p52https://www.bilibi......