data: () => ({
options: [
{ value: 69, text: 'hello, world!!' },
{ value: 187, text: 'fuck the world' },
{ value: 666, text: 'fuck everything' },
],
value: null,
}),
computed: {
selectedText() {
return (this.options.find(n => n.value === this.value) || {}).text || '';
},
},
<select v-model="value">
<option v-for="n in options" :value="n.value">{{ n.text }}</option>
</select>
<div>
Текст выбранной опции: <span>{{ selectedText }}</span>
</div>
item
и active
- плохие названия для переменных, хранящих класс, makeActive
- плохое название метода, его меняющего. Называем все по-людски.data: {
activeClass: 'container'
...
},
methods: {
setActiveClass: function(className) { ... }
}
data: {
activeClass: 'container',
buttons: [
['+', 'container'],
['-', 'container-fluid']
]
}
<button v-for="[label, className] in buttons">...</button>
data
нет необходимости. <button
v-for="[label, className] in buttons"
v-on:click="setActiveClass(className)"
v-bind:class="{ active: className === activeClass }">
{{label}}
</button>
$(function(){
$('.your-class').slick({
slidesToShow: 4,
slidesToScroll: 1,
appendArrows: $('.your-class-arrow'),
prevArrow: '<button id="prev" type="button" class="btn btn-juliet"><i class="fa fa-chevron-left" aria-hidden="true"></i> Туда</button>',
nextArrow: '<button id="next" type="button" class="btn btn-juliet">Сюда <i class="fa fa-chevron-right" aria-hidden="true"></i></button>'
});
});
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<div class="your-class-arrow"></div>
top
, поэтому все глючит и скачет с 10-ю кадрами в секунду. Анимировать такие штуки надо с помощью translate3d
, чтобы задействовать GPU. Почему translate3d
, а не translateX
? Потому что анимирование c с помощью translateX
глючит (идет с рывками) в IE11, первых EDGE и старых Firefox, если сочетать с transition для эффекта инерции. translate3d
. У меня есть положительный опыт работы с ним. Но не переусердствуйте :))translate3d
, можно сделать так. Код ниже содержит много лишнего CSS, потому что он из проекта вырван. Скорее всего, JS тоже весьма примитивен (ибо я писал), но суть алгоритма ясна:window.requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.
const input = document.querySelector('input');
const num = 100;
input.addEventListener('change', function() {
this.value = (this.value / num | 0) * num;
});
<button data-step="-1">-</button>
<button data-step="+1">+</button>
document.querySelectorAll('[data-step]').forEach(function(n) {
n.addEventListener('click', this);
}, e => input.value = +input.value + e.target.dataset.step * num);