new Vue({
el: '#app',
data: () => ({
scrollY: 0,
}),
created() {
const onScroll = () => this.scrollY = window.scrollY;
window.addEventListener('scroll', onScroll);
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<div id="app">
<div class="scroll-y">scroll y: {{ scrollY }}</div>
<div v-for="i in 200">{{ i }}</div>
</div>body {
margin: 0;
height: 100vh;
}
#app {
background: linear-gradient(to bottom, white, lime);
}
.scroll-y {
position: fixed;
background: black;
color: yellow;
right: 0;
margin: 10px;
padding: 10px;
font-size: 48px;
}document.querySelector('input').addEventListener('keypress', function(e) {
e.preventDefault();
const
oldVal = this.value,
newVal = oldVal.replace(/(0)(?!.*\1)/, e.key);
this.value = newVal === oldVal ? `${e.key}${oldVal}` : newVal;
});увы но нет
за 20 сек компонент апдейтнулся 8к раз и у меня упал браузер
document.body.style.filter = ....
а элементу массива вообще никак?
менялся цвет у каждого слова в строке <...> ставить везде span <...> долго
const str = 'Текст1, текст2, текст3, текст4, текст5, текст6';
const p = document.querySelector('p');
let color = 0;
const colors = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'magenta'];
p.innerHTML = str.split(',').map(n => `<span>${n}</span>`).join('');
setInterval(spans => {
spans.forEach((n, i) => n.style.color = colors[(color + i) % colors.length]);
color = (color + 1) % colors.length;
}, 300, p.querySelectorAll('span'));любопытно как это решается без flat...
...-магии