Vue.js 拆分父类名称并添加到每个子元素

我试图找出一种方法，从父类名称中拆分值，并将每个单独的值添加到父类中的每个子类（子元素的数量是可变的）

可能存在具有一个值或多个值的类名

<div class="block-33-33-33-33">
  <div class="card block__col--33"></div>
  <div class="card block__col--33"></div>
  <div class="card block__col--33"></div>
  <div class="card block__col--33"></div>
</div>

或

或

最好的处理方法是什么

---

谢谢。

您可以按以下方式尝试使用

querySelector（）

和

queryselectoral（）

：

var pClass=document.querySelector（'div[class^=block'））.classList.value.split（'-'）；
pClass.shift（）；//删除第一项
document.queryselectoral（'div.card'）.forEach（函数（el，i）{
el.classList.add（'block_uucol--'+pClass[i]）；
});
.block\u col--33{
字体大小：20px；
颜色：红色；
}

1.
2.
3.
4.

let parentDiv=$（“body>div”）
让parentClassArr=parentDiv.attr（'class'）.split（'-'））
for（设i=1；i



在action=>
中，classname的数量是否总是等于子元素的数量？是的，正确。如果有4个值，则将有4个子元素。OP没有标记或提及jQuery
<div class="block-50-50">
  <div class="card block__col--50"></div>
  <div class="card block__col--50"></div>
</div>

<div class="block-100">
  <div class="card block__col--100"></div>
</div>

const blocks = document.querySelectorAll("[class^=block-]");
blocks.forEach(splitParentClassNameToChildren);

function splitParentClassNameToChildren(parent) {
    const { className } = parent;
  const splitValues = className.match(/(\d\d)/g);
  splitValues.forEach((value, i) => {
    parent.children[i].classList.add(`block__col--${value}`);
  })
}