0xD34F

const containerSelector = '.card_options > div';
const itemSelector = '.option';
const activeClass = 'checked';
const toggleItem = item => item
  ?.closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList[n === item ? 'toggle' : 'remove'](activeClass));


// можно добавить обработчик клика каждому элементу индивидуально
document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggleItem(e.currentTarget));

// а можно один раз - делегированный, всей странице
document.addEventListener('click', e => {
  toggleItem(e.target.closest(itemSelector));
});

children

$dataStr = file_get_contents('https://corona-virus-stats.herokuapp.com/api/v1/cases/general-stats');
$dataObj = json_decode($dataStr);

$props = [ 'total_cases', 'recovery_cases', 'death_cases' ];

echo implode('<br>', array_map(function($n) use($dataObj) {
  return $n.': '.$dataObj->data->$n;
}, $props));

this.maskTel.lazy = true;
this.$nextTick(() => this.valueTel = '');

как тоже самое сделать при помощи метода match?

(str.match(/\S+/g) ?? [])[2]

что будет быстрее?

split, но вы этого не заметите

sortedData = sorted(zip(numbers, users), key=lambda n: int(n[0]), reverse=True)
print('\n'.join(f'{i}. {n[0]} {n[1]}' for i, n in enumerate(sortedData, 1)))

print('\n'.join(f'{i}. {n}' for i, n in enumerate(sorted(numbers, key=int, reverse=True), 1)))

Арифметическая, например:

const isArithmeticProgression = arr =>
  arr.length > 1
    ? new Set(arr.map((n, i, a) => n - a[i + 1]).slice(0, -1)).size === 1
    : !!arr.length;

// или

const isArithmeticProgression = arr =>
  !!arr.length && arr.every((n, i, a) => !i || (n - a[i - 1] === a[1] - a[0]));

Геометрическая проверяется аналогично.

Поскольку важны только значения, то сразу же выдёргиваем из объекта соответствующий массив, и о ключах забываем: const arr = Object.values(obj);. Дальше есть варианты:

const result = arr.sort((a, b) => a.position - b.position).map(n => n.color);

или

const result = arr
  .reduce((acc, n) => ((acc[n.position] = acc[n.position] ?? []).push(n.color), acc), [])
  .flat();

или (не годится, если значения position не являются уникальными)

const result = Object.values(Object.fromEntries(arr.map(n => [ n.position, n.color ])));

const [ items, setItems ] = useState([
  { value: ..., text: '...', checked: false },
  { value: ..., text: '...', checked: false },
  ...
]);

const onChange = ({ target: { checked, dataset: { index } } }) => {
  setItems(items.map((n, i) => i === +index ? { ...n, checked } : n));
};

<form>
  {items.map((n, i) => (
    <div>
      <label>
        <input
          type="checkbox"
          data-index={i}
          value={n.value}
          checked={n.checked}
          onChange={onChange}
        />
        {n.text}
      </label>
    </div>
  ))}
  <button disabled={items.every(n => !n.checked)}>submit</button>
</form>

https://jsfiddle.net/ps6zt52a/

Складываете данные блоков в массив, каждому элементу массива добавляете свойство, которое будет отвечать за показ контента:

data: () => ({
  items: [
    { show: true, ... },
    { show: true, ... },
    ...
  ],
}),

<template v-for="(n, i) in items">
  <button @click="n.show = !n.show">{{ n.show ? 'hide' : 'open' }}</button>
  <div class="list" v-show="n.show">
    ...
  </div>
  <hr v-if="i !== items.length - 1">
</template>

https://jsfiddle.net/ra5byco9/

UPD. Вынесено из комментариев:

С v-for я знаю как, а без него никак?

Дело не в v-for, а в том, что состояние каждого скрываемого-показываемого элемента должно управляться отдельным свойством. Можно его, свойство, сделать частью компонента, отвечающего за демонстрацию пары кнопка-контент. Дальше можете создавать столько экземпляров, сколько потребуется.

$('#search').on('input', function() {
  const val = this.value.toLowerCase();

  $('table tbody tr')
    .hide()
    .filter((i, tr) => $('td', tr).get().some(td => td.innerText.toLowerCase().includes(val)))
    .show();
});

function addChildrenIds(&$arr) {
  $ids = [];

  if (is_array($arr)) {
    foreach ($arr as &$n) {
      $n['childrenIds'] = addChildrenIds($n['children']);
      array_push($ids, $n['id'], ...$n['childrenIds']);
    }
  }

  return $ids;
}

Потому что по умолчанию v-model слушает событие input.

Замените change на input, или укажите change в настройках model.

document.querySelectorAll('.row').forEach(addClass);

// или

for (const n of document.getElementsByClassName('row')) {
  addClass(n);
}

Как выглядит функция addClass? Зависит от того, что вам нужно. Есть разные варианты:

• Если добавляемый класс всегда содержит количество дочерних элементов:
  
  

  const addClass = el => el.classList.add(`row-${el.children.length}`);

  
  
• Если добавлять класс надо не всегда и имя может быть произвольным, тогда можно сделать объект, где ключами будут количества дочерних элементов, а значениями - соответствующие классы:
  
  

  const classes = {
    3: 'row-3',
    5: 'row-5',
    7: 'row-xxx',
  };
  
  function addClass(el) {
    const className = classes[el.children.length];
    if (className) {
      el.classList.add(className);
    }
  }

  
  
• Если класс должен добавляться когда количество дочерних элементов попадает в некоторый интервал, то складываем в массив пары из классов и верхних границ соответствующих интервалов:
  
  

  const classes = [
    { max:        3, name: 'row-0-3' },
    { max:        5, name:        '' }, // если дочерних элементов 4 или 5, класс не добавляется
    { max:        7, name: 'row-6-7' },
    { max: Infinity, name: 'row-7-x' },
  ];
  
  function addClass(el) {
    const { name } = classes.find(n => n.max >= el.children.length) ?? {};
    if (name) {
      el.classList.add(name);
    }
  }

  
  
• В случае, когда классов может быть несколько, делаем массив, содержащий пары из классов и функций, принимающих количество элементов и определяющих, надо ли данные классы добавлять:
  
  

  const classes = [
    [ c => c < 5,          'row-0-4' ],
    [ c => c % 2,          'row-odd' ],
    [ c => 6 < c && c < 9, 'row-7-8' ],
  ];
  
  const addClass = ({ classList, children: { length } }) =>
    classList.add(...classes.reduce((acc, n) => (
      n[0](length) && acc.push(n[1]),
      acc
    ), []));

  
  

$('.entry__arrow--increment, .entry__arrow--decrement').click(function() {
  const $this = $(this);

  $this.closest('.entry__box').find('.entry__data').text(function(i, text) {
    const { step, max, min } = this.dataset;

    let newVal = +text + step * ($this.hasClass('entry__arrow--increment') ? 1 : -1);
    if (newVal > max) {
      newVal = min;
    } else if (newVal < min) {
      newVal = max;
    }

    return `${newVal}`.padStart(2, 0);
  });
});

const li = document.querySelectorAll('li');
li.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  e.preventDefault();
  li.forEach(n => n.classList.toggle('active', n === this));
  const href = this.querySelector('a').getAttribute('href');
  document.querySelector(href).scrollIntoView({
    behavior: 'smooth',
  });
}

Где элементы находятся, во что и по сколько надо оборачивать:

const parent = document.querySelector('.team');
const wrapperTag = 'div';
const wrapperClass = 'new';
const wrapSize = 2;

Оборачиваем:

parent.querySelectorAll(':scope > *').forEach((n, i) => {
  if (!(i % wrapSize)) {
    parent.appendChild(document.createElement(wrapperTag));
    parent.lastChild.classList.add(wrapperClass);
  }

  parent.lastChild.appendChild(n);
});

или

parent.append(...Array.from(
  { length: Math.ceil(parent.children.length / wrapSize) },
  () => {
    const wrapper = document.createElement(wrapperTag);
    wrapper.className = wrapperClass;
    wrapper.append(...Array.prototype.slice.call(parent.children, 0, wrapSize));
    return wrapper;
  }
));

number_format

В первом случае контекстом будет не экземпляр компонента, так что если внутри метода вы хотите вызывать другие методы или обращаться к свойствам, этот вариант неприемлем.

Второй - более короткая запись третьего.