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 тоже весьма примитивен (ибо я писал), но суть алгоритма ясна:
>100%
window.requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.
<div id='l1_1'>
<div id='l2_1'>
<p id='l3'>
</div>
<p id='l2_2'>
</div>
<p id='l1_2'>
<p id='l1_3'>#l1_1 > p соответствует элементу #l2_2#l1_1 + p соответствует элементу #l1_2 
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);
<div id="vk_widget">
<div id="vk_groups"></div>
</div>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
<script>
function VK_Widget_Init(){
document.getElementById('vk_groups').innerHTML = "";
var vk_width = document.getElementById('vk_widget').clientWidth;
VK.Widgets.Group("vk_groups", {mode: 0, width: vk_width, height: "241", color1: "2B2B2B", color2: "FFFFFF", color3: "2B2B2B"}, 26292363);
};
window.addEventListener('load', VK_Widget_Init, false);
window.addEventListener('resize', VK_Widget_Init, false);
</script>#vk_widget, #vk_groups {
width: 100%;
}