function App() {
const [ numbers, setNumbers ] = React.useState([ 1, 2, 3 ]);
const [ timerId, setTimerId ] = React.useState(null);
const add = () => setNumbers(numbers => [ ...numbers, Math.random() * 10 | 0 ]);
const start = () => setTimerId(setInterval(add, 1000));
const stop = () => (clearInterval(timerId), setTimerId(null));
return (
<div>
<ul>
{numbers.map(n => <li>{n}</li>)}
</ul>
<div>
<button onClick={add} disabled={timerId}>Добавить число</button>
<button onClick={start} disabled={timerId}>Старт</button>
<button onClick={stop} disabled={!timerId}>Стоп</button>
</div>
</div>
);
}
$key = 'property';
$val = 2;
$toReverse = array_filter($array, function($n) use($key, $val) {
return $n[$key] === $val;
});
$newArray = array_map(function($n) use(&$toReverse, $key, $val) {
return $n[$key] === $val ? array_pop($toReverse) : $n;
}, $array);
const arr = Object
.entries(obj)
.reduce((acc, [ k, v ]) => (
k = k.match(/([a-z]+)(\d+$)/),
(acc[k[2]] ??= {})[k[1]] = v,
acc
), []);
const os = Object.fromEntries(arr.map(n => [ n.system, 0 ]));
const count = arr.reduce((acc, n) => ((acc[n.name] ??= { ...os })[n.system]++, acc), {});
console.log(Object
.entries(count)
.map(n => `${n[0]}: ${Object.entries(n[1]).map(m => m.join(' - ')).join(', ')}`)
.join('\n')
);
$('.el1--closed').one('click', function() {
$(this)
.siblings()
.slideToggle();
});
$('.block').on('click', '.el1--closed', function() {
$(this)
.removeClass('el1--closed')
.siblings()
.slideToggle();
});
дошел до "v-model изначально равным соответствующему значению из объекта data" и не понимаю как это сделать
<el-form-item v-for="n in formItems">
<el-input v-model="n.value" />
<el-form-item v-for="n in formItems">
<el-input v-model="n.obj[n.key]" />
true
/false
, а читаете 'true'
/'false'
. В куках же строки хранятся. А булевым эквивалентом любой непустой строки является true
. Поэтому результат работы v-if
/v-show
одинаков, вне зависимости от прочитанного значения. const arr = useMemo(() => {
const multiple = [ 'Format', 'Stars' ];
return str
.split('\n\n')
.map(n => n
.split('\n')
.reduce((acc, m) => (
m = m.split(/(?<=^[^:]+): /),
acc[m[0]] = multiple.includes(m[0]) ? m[1].split(', ') : m[1],
acc
), {}));
}, [ str ]);
<ul>
{arr.map(n => (
<li>
<h3>{n.Title}</h3>
<div>Year: {n['Release Year']}</div>
<div>Format: <ul>{n.Format.map(m => <li>{m}</li>)}</ul></div>
<div>Stars: <ul>{n.Stars.map(m => <li>{m}</li>)}</ul></div>
</li>
))}
</ul>
data: () => ({
swiperOptions: {
initialSlide: здесь номер слайда,
},
}),
<swiper :options="swiperOptions">
кнопка будет disabled, если все три поля input будут пустые и наоборот, если все поля заполнены, то кнопка станет enabled
const button = document.querySelector('селектор кнопки');
const inputs = [...document.querySelectorAll('селектор инпутов')];
const onInput = () => button.disabled = inputs.every(n => !n.value);
inputs.forEach(n => n.addEventListener('input', onInput));
onInput();
every
будет some
. onMarkerMouseOver() {
this.openPopup();
}
<Marker onMouseOver={this.onMarkerMouseOver}>
<Input handleInput={this.handleInput} />
onChange={this.props.handleInput}
const wrapperSelector = 'селектор блока с товаром, вам виднее, каким он должен быть';
const quantitySelector = '.cart_qty';
const totalSelector = '.shopcart__item-total';
$(wrapperSelector).on('change', quantitySelector, e => {
$(totalSelector, e.delegateTarget).text(function() {
return e.target.value * this.dataset.price;
});
});
// или
document.querySelectorAll(quantitySelector).forEach(function(n) {
n.addEventListener('change', this);
}, ({ target: t }) => {
const total = t.closest(wrapperSelector).querySelector(totalSelector);
total.innerText = t.value * total.dataset.price;
});
data: () => ({
value: '',
values: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
}),
<input v-model="value">
<button v-for="(n, i) in values" @click="value = n">set value #{{ i + 1 }}</button>
data: () => ({
scroll: 0,
}),
computed: {
style() {
return {
height: здесь рассчитываете высоту на основе this.scroll,
};
},
},
created() {
const onScroll = () => this.scroll = document.scrollingElement.scrollTop;
onScroll();
document.addEventListener('scroll', onScroll);
this.$on('hook:beforeDestroy', () => document.removeEventListener('scroll', onScroll));
},
<div :style="style">