function App() {
const [ count, setCount ] = useState(() => +localStorage.getItem('count') || 0);
useEffect(() => {
localStorage.setItem('count', count);
}, [ count ]);
const onClick = e => setCount(count => count + +e.target.dataset.change);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={onClick} data-change="+1">+</button>
<button onClick={onClick} data-change="-1">-</button>
</div>
);
}
data: () => ({
buttons: [
{ className: 'btn1', text: 'Limit' },
{ className: 'btn2', text: 'Market' },
],
active: 0,
}),
<button
v-for="(n, i) in buttons"
v-text="n.text"
:class="[ 'btn', n.className, { 'active-btn': i === active } ]"
@click="active = i"
></button>
btn*
действительно идут по порядку)data: () => ({
buttons: [ 'Limit', 'Market' ],
active: 'Limit',
}),
<button
v-for="(n, i) in buttons"
:class="`btn btn${i + 1} ${n === active ? 'active-btn' : ''}`"
@click="active = n"
>{{ n }}</button>
<YandexClusterer
@vue:mounted="onClustererMounted"
...
methods: {
onClustererMounted(e) {
e.component.exposed.events.add('click', обработчикКлика);
},
...
@click.stop
).data: () => ({
openedPopup: null,
}),
methods: {
togglePopup(popup) {
this.openedPopup = this.openedPopup === popup ? null : popup;
},
},
@click="togglePopup('search')"
v-show="openedPopup === 'search'"
const { filledColor: F, emptyColor: E, ...props } = defineProps({
value: Number,
maxValue: Number,
segments: {
type: Number,
default: 5,
},
filledColor: {
type: String,
default: 'red',
},
emptyColor: {
type: String,
default: 'black',
},
});
const background = val =>
val >= 1 ? F :
val <= 0 ? E :
`linear-gradient(to right, ${F}, ${F}, ${val * 100}%, ${E} ${val * 100}%)`;
<div class="rating">
<div
v-for="i in segments"
:style="{ background: background(value / maxValue * segments - i + 1) }"
class="rating-segment"
></div>
</div>
const sortedData = useMemo(() => {
return data
.pages
.flatMap(n => n.data)
.sort((a, b) => b.liked.length - a.liked.length);
}, [ data ]);
<div className="App">
{sortedData.map((item) => (
<div>
...
str.match(/\d+/g).join('.')
$arr2 = array_combine(array_column($arr, 'sku'), $arr);
$result = array_map(fn($n) => $arr2[$n], $torgPred);
$result = array_filter($arr, fn($n) => in_array($n['sku'], $torgPred));
false
, всё выбрано - true
, для остальных вариантов undefined
, при котором в true
будет выставляться indeterminate. Также у него будет сеттер - если попытаться назначить true
, то выбранными должны стать все чекбоксы; если false
, то никто.const items = ref([
{ id: 69, title: 'hello, world!!' },
{ id: 187, title: 'fuck the world' },
{ id: 666, title: 'fuck everything' },
]);
const checked = ref([ 187 ]);
const isAllChecked = computed({
get: () => ({
0: false,
[items.value.length]: true,
})[checked.value.length],
set: val => checked.value = val ? items.value.map(n => n.id) : [],
});
<div>
<label>
<input
type="checkbox"
v-model="isAllChecked"
:indeterminate.prop="isAllChecked === undefined"
>
<b>Check all</b>
</label>
</div>
<div v-for="n in items" :key="n.id">
<label>
<input type="checkbox" v-model="checked" :value="n.id">
{{ n.title }}
</label>
</div>
/[^\/]+(?=\/$)/.exec(str)[0]
str.match(/[^\/]+/g).pop()
str.split('/').at(-2)
clearInterval из функции stopTheTimer результата необходимого не показал
data() { <...> }, mounted() { <...> }, stopTheTimer() { clearInterval(this.interval); }
Хук get не позволяет получить параметры вызова метода
function sequence(functions) {
return new Proxy(functions, {
get(target, key) {
const val = target[key];
return val instanceof Function
? (...args) => {
console.log(`${key} called with arguments: `, args);
return val.apply(target, args);
}
: val;
},
});
}
const groupedArr = arr.reduce((acc, n) => {
const keys = n.slice(0, -1);
let group = acc.find(m => m.length === n.length && keys.every((k, i) => k === m[i]));
if (!group) {
acc.push(group = [ ...keys, 0 ]);
}
group[keys.length] += n[keys.length];
return acc;
}, []);
const groupedArr = arr.reduce((acc, n) => {
const keys = n.slice(0, -1);
const groups = keys.reduce((groups, k) => groups.set(k, groups.get(k) ?? new Map).get(k), acc[1]);
let group = groups.get(acc[2]);
if (!group) {
acc[0].push(group = [ ...keys, 0 ]);
groups.set(acc[2], group);
}
group[keys.length] += n[keys.length];
return acc;
}, [ [], new Map, Symbol() ])[0];
v-model
:props: {
modelValue: {
type: String,
default: '',
},
...
<select
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
<option
v-for="n in options"
v-text="n.label"
:value="n.value"
></option>
</select>
data: () => ({
selected: Array(10).fill(null),
...
}),
methods: {
getValue(index) {
this.active = index;
console.log(this.selected[index]);
},
},
<div
v-for="(n, i) in selected"
class="test__item"
:class="{ test__item_active: i === active }"
>
<span @click="getValue(i)">элемент списка</span>
<Select v-model="selected[i]" :options="options" />
</div>
const profilesSorting = computed(() => profiles
.value
.filter(n => n.id === filters.value.id)
.sort(...)
.slice(...)
);