vue v-for循环每行显示三个盒子，每行最后一个盒子的竖线不显示

Posted 2023-05-17

参考技术A 需求：每行三个盒子，前两个盒子右边有竖线，最后一个不显示竖线

看到这个需求的时候，我想到了css的:last-child选择器，last-child选择器究竟能不能达到我们的需求呢？我用vue+element-ui专门为本文做了一个demo，给大家演示效果

在使用:last-child选择器的时候遇到不起作用的问题，具体的点击链接查看 :last-child选择器不起作用
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

css部分：

:last-child选择器去掉一行盒子的最后一个貌似能行得通，但我的需求有两行盒子，去掉每一行的最后一个竖线，这个方法就不灵┭┮﹏┭┮

看来我们需要想其他方法了，于是在网上查了一下，有了更好的解决方法

这里涉及到一个小小的计算，在这里和大家说下，不懂没关系，遇到这样的需求会用就行( ▽ )
(index + 1) % 3 == 0，这里的index的值为2（第三项），5（第六项），
8（第九项）......以此类推我们会发现，我们发现最后一项都是3的倍数，这些值里，(index+1)%3 ==0为每行最后一个元素，需要显示竖线。这里的index是数组里面的下标，所以index+1表示当前数组里面的第几项，然后(index+1)%3，每满3，顺序数除以3余数都为0。

html部分：

js部分：

css部分：

到目前为止，我们想要的需求就实现完成啦

有没有更简洁的方法来获取每行的最后 N 个字符？

【中文标题】有没有更简洁的方法来获取每行的最后 N 个字符？

【英文标题】：Is there a cleaner way of getting the last N characters of every line?

【发布时间】：2014-08-17 02:22:34

【问题描述】：

为了简化讨论，让N = 3。

我目前提取文件或流中每一行的最后三个字符的方法是使用sed 捕获组中的最后三个字符并将整行替换为该组。

sed 's/^.*\(.\3\\)/\1/'

它可以工作，但似乎过于冗长，尤其是当我们与获取一行中的前三个字符的方法进行比较时。

cut -c -3

有没有更简洁的方法来提取每行的最后 N 个字符？

【问题讨论】：

@PeterSchneider 这将删除最后 3 个字符，而不是保留它们。

@Barmar 确实！我看错了问题。

@Barmar，我稍微修改了这个问题。我写的太具体了。

@Barmar，我目前正在测试下面答案的通用版本。

【参考方案1】：

grep -o '...$' 很简单：

cat /etc/passwd  | grep -o '...$'
ash
/sh
/sh
/sh
ync
/sh
/sh
/sh

或者更好：

N=3; grep -o ".\$N\$" </etc/passwd
ash
/sh
/sh
/sh
ync
/sh
/sh

这样您就可以将N 调整为您喜欢的任何值。

【讨论】：

这个答案在一般情况下也适用于egrep -o '.3$'。时间到了我会接受的。 :)

@merlin2011 这将丢弃少于 3 个字符的行。如果这是您想要的行为，很好，否则，您可能需要考虑 .1,3$。

仅供参考，` egrep -o '。3$` 需要连续 3 次相同的字符，所以它不能推广到这种情况

@Jezzamon 不，它没有，它需要任何 3 个字符。 egrep 已弃用，取而代之的是 grep -E 顺便说一句。

【参考方案2】：

rev /path/file | cut -c -3 | rev

【讨论】：

我也喜欢这个答案，因为我几乎忘记了转速。 +1！稍后我还将对两者进行基准测试，看看双反转是否比正则表达式更快。

用 3 个 shell 命令替换单个 sed 'verbose' 会使用更多资源，这不是有点笨吗？

不，更容易记住。

我同意@NeronLeVelu，这不是cleaner 的方式。

【参考方案3】：

当它是一个很小的命令时，为什么要强调简洁？普遍性更为重要：

$ cat file
123456789
abcdefghijklmn

从第 4 个字符开始打印 3 个字符：

$ awk 'print substr($0,4,3)' file
456
def

从倒数第四个字符开始打印 3 个字符：

$ awk 'print substr($0,length($0)-3,3)' file
678
klm

要从每行中间的 [周围] 打印 3 个字符：

$ awk 'print substr($0,(length($0)-3)/2,3)' file
345
efg

【讨论】：

如何将其保存到变量中？

您是在问 1) 如何将 awk 命令的输出保存到 shell 变量中，还是 2) 如何将子字符串保存到 awk 变量中，或者 3) 其他？

我说的是 1。不过我找到了...f_id="$(echo $filename | awk 'print substr($0,length($0)-5,2)')"

请注意：length($0) 仅相当于 length

是的，我知道，我只是发现添加 4 个额外的字符更清晰。我可以接受length()，但是你只需要节省2个字符，而不是明确说明你得到的长度，$0，所以这似乎不值得权衡，我讨厌length，因为它看起来像一个变量和它的变体是一个非常常见的变量名称（即我们经常必须将一些字符串或数组的长度保存在一个变量中）。

【参考方案4】：

纯 bash 解决方案：

$ while read -r in; do echo "$in: -3"; done
hello
llo
$

sed

$ sed 's,.*\(.\3\\)$,\1,'
hallo
llo
$