0xD34F

Вопрос - правильный ли такой подход?

Ну раз вы намерены использовать vue - в корне неверный. Говоря "объект", вы имеете в виду элемент DOM-дерева, тогда как vue предполагает первичность данных. Например - вроде бы сделано ровно по вашему описанию, но обратите внимание, что в основе данные, а не разметка - элементы создаются на основе массивов, элементы не модифицируются непосредственно, вместо этого изменяется содержимое массива.

Не выдумывайте, всё переопределяется. Просто вы этого не видите, потому что элемент с переопределённым стилем целиком скрыт вложенными элементами. Если сделать так, чтобы вложенные элементы занимали более ограниченную площадь (строчные вместо блочных, например), или сделать их частично прозрачными (тот же background, например), станет очевидным, что элемент .text был успешно стилизован.

После подключения обработчиков событий, генерируйте само событие, типа $('.form-group').trigger('input').

https://jsfiddle.net/4Lg53bs8/

$pow = ceil(count($array) / 2);
$arr = array_map(function($n) use($sum, &$pow) {
  $pow -= 1;
  return $sum * (1 + (1 - (2 ** -abs($pow))) * ($pow < 0 ? -1 : 1));
}, $array);

Во-первых - замените имя свойства class, ключевые слова использовать нельзя (на самом деле можно, но как - я вам говорить не стану, сперва научитесь давать свойствам нормальные имена). Пусть будет className, например.

Во-вторых, :class="className". Ну и документацию почитайте.

numbers = [n for n in range(1000, 10000)]

или

numbers = list(range(1000, 10000))

возможно ли это вообще

Нет, невозможно. То, чего вы хотите - это нечто из ряда вон. Такого не то, что никто никогда раньше не делал - в голову никому не приходило. Вот и нет соответствующих инструментов.

А если серьёзно - используйте IN.

https://codepen.io/anon/pen/drPKJK?editors=1010

Пусть компонент через props получает список допустимых значений:

<Range steps={[ 500, 1000, 5000, 10000 ]} />

А по событию change ищите среди них ближайшее к установленному пользователем:

class Range extends React.Component {
  state = {
    value: this.props.steps[0],
  }

  onChange = ({ target: { value } }) => {
    this.setState({
      value: this.props.steps.reduce((closest, n) =>
        Math.abs(closest - value) < Math.abs(n - value) ? closest : n
      ),
    });
  }

  render() {
    const { steps } = this.props;

    return (
      <div>
        <input
          type="range"
          min={steps[0]}
          max={steps[steps.length - 1]}
          value={this.state.value}
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

Похоже на то, что вам нужно?

options: {
  tooltips: {
    enabled: false,
  },
},

например

const classes = [
  { maxLen: 15, name: 'length-15' },
  { maxLen: 30, name: 'length-30' },
  { maxLen: 45, name: 'length-45' },
];

document.querySelectorAll('.container').forEach(n => {
  const len = n.textContent.length;
  const cls = classes.find(m => m.maxLen >= len);

  if (cls) {
    n.classList.add(cls.name);
  }
});

echo explode('-', (explode('/', $page)[3]))[2];

или

preg_match('~colors\-is\-(\w+)~', $page, $match);
echo $match[1];

list(map(lambda n: n['obj_id'], data))

.container
  .row.flex-wrap.bg-light.sticky-top.m-auto.dots
    - for (var x = 1; x <= 8; x++)
      .col-md-3      
        .dot
          img(src="" alt="" data-id=x)
          p text

$('.data-item').on('input', 'input', function() {
  $(this).closest('.data-item').find('.ui-slider').slider('value', $(this).val());
});

Параметр text - можно не только строки передавать. Например:

text={<a href="https://toster.ru">toster</a>}

Начал изучать MobX на этом ресурсе, встал вопрос.

Так вы изучайте дальше - ответ на ваш вопрос в восьмой части этого руководства.

arr.sort((a, b) => (a.finishedDate || a.createdDate) - (b.finishedDate || b.createdDate));