首页 > 其他分享 >Vue3 Div 与 v-for 的配合应用,超出自动带滚动条

Vue3 Div 与 v-for 的配合应用,超出自动带滚动条

时间:2023-10-07 14:15:38浏览次数:31  
标签:dataItem 滚动条 自动 Vue3 Div font

效果图

 代码

<li  >
    <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>当前会议 [ 0 ]</p></a>
    <div style="height:80%;overflow:auto;">
    
       <div  v-for="(dataItem, index) in globalData.confMemberData"  :key="index" class="dataFontStyle"  >
                 {{dataItem.userExten}} {{dataItem.userName}}  {{dataItem.callStatus}} 
       </div>
 
   </div>
</li>
其中 globalData.confMemberData 为全局json变量。 详见:https://www.cnblogs.com/hailexuexi/p/17649247.html
overflow:auto;  滚动条自动显示
CSS 部分
.dataFontStyle {
    font-family: 'Microsoft YaHei'; 
    color: #FFD700; 
    font-size: 14px; 
    line-height: 24px; 
    font-weight: normal; 
}

 

标签:dataItem,滚动条,自动,Vue3,Div,font
From: https://www.cnblogs.com/hailexuexi/p/17746132.html

相关文章

  • Css实现浏览滚动条效果
    Css实现浏览滚动条效果前言也是有大半个月没有更新文章了,大部分时间都在玩,然后就是入职的事。今天就更新一个小知识,刷抖音的时候看到的,感觉还不错。属性介绍关键属性animation-timeline:动画名称;用于控制动画的时间轴。它可以让你在一个元素上同时播放多个动画,控制它们的开......
  • vue3最基础入门,vue3 + element plus实战pc端后台管理,从零到一设计pc端项目
    教程地址 https://www.bilibili.com/video/BV1C3411s7bV 稳定、快速、免费的前端开源项目CDN加速服务,共收录了4387个前端开源项目https://www.bootcdn.cn/all/ Normalize.css使浏览器呈现所有HTML元素更加一致,并且符合现代web标准。Normalize.css只作用于需要......
  • CSS 实现 table 表头固定 tbody 显示垂直滚动条并自定义滚动条样式
    一、最终效果图 二、关键代码html代码:<divclass="table_info"><tableborder="0"cellspacing="0"cellpadding="0"style="width:100%;"><thead><tr><th>项目账号</th&g......
  • 「题解」Codeforces Round 883 (Div. 3)
    A.EscalatorConversationsProblem[题目](RudolphandCuttheRope)Sol&Code绳子长度大于钉子高度的要剪#include<bits/stdc++.h>typedeflonglongll;intmin(inta,intb){returna<b?a:b;}intmax(inta,intb){returna>b?a:b;}in......
  • 「题解」Codeforces Round 888 (Div. 3)
    A.EscalatorConversationsProblem题目Sol&Code签到#include<bits/stdc++.h>typedeflonglongll;intmin(inta,intb){returna<b?a:b;}intmax(inta,intb){returna>b?a:b;}intT,n,m,k,h;intmain(){scanf(......
  • 「题解」Codeforces Round 891 (Div. 3)
    A.ArrayColoringProblem题目Sol&Code只有数列的和为偶数时才符合要求,即有任意个偶数,偶数个奇数。将这些数分成两部分,发现两部分初始值\(0\)为偶数,偶数不会影响奇偶性,故需要偶数个奇数。#include<bits/stdc++.h>#defineN51typedeflonglongll;intmin(inta,......
  • CF1249(Div. 3) 题解(A to D)
    \(\texttt{EF}\)忘(不)记(会)写了。AYetAnotherDividingintoTeams题解题目大意有一个长度为\(n\)的序列\(a_1,a_2,\cdots,a_n\),将他们分为若干组,使得每一组没有两个数的差为\(1\),使分的组数尽可能少。解题思路排完序后对于任意\(1\lei<n\)均有\(a_i\)与\(a_{i......
  • CF1234(Div. 3) 题解(A to E)
    AEqualizePricesAgain题解题目大意\(n\)个商品,每个商品价格为\(a_i\),求一个最小的价格\(x\),使得不亏本(即\(\sum\limits_{i=1}^n{(a_i-x)}\ge0\))。解题思路输出平均数向上取整(即\(\left\lceil(\sum\limits_{i=1}^n{a_i})\divn\right\rceil\))即可。代码#include<bit......
  • CF1203(Div. 3) 题解(C to F1)
    由于太懒了,所以不想(会)写\(\texttt{AB}\)和\(\texttt{F2}\)。CCommonDivisors题解题目大意给定一个长度为\(n\)的数列\(\{a_i\}\),求\(\sigma(\gcd\limits_{i\in[1,n]}\{a_i\})\)。解题思路先算出所有元素的最大公因数,如果最大公因数\(g\)为\(1\),即所有元素两两......
  • CF1873(Div. 4) 题解 (A to E)
    AShortSort题解题目大意给定一个长度为\(3\)、由\(a,b,c\)组成的字符串,问可以不变或交换两个字符是的变为\(\texttt{abc}\)。解题思路由于大小固定,所以预处理可行的字符串(仅包含\(\texttt{abcacbbaccba}\))即可。代码#include<bits/stdc++.h>usingnamespacest......