.hover
на .square:hover
- всё, больше ничего не надо. Если есть возможность что-то сделать только через css - делайте это что-то только через css.мне нужно было использовать именно через script, потому,что я потом буду манипулировать этим методом chhoseShipOnBoard, например ещё добавлять классы к соседним блокам, чтобы при наведении выделялся не только текущий блок, но и несколько рядом находящихся блоков
data: () => ({
hovered: null,
...
}),
methods: {
getClasses(index) {
return что-то, в зависимости от index и this.hovered;
},
},
<span
v-for="(n, i) in squares"
@mouseover="hovered = i"
@mouseout="hovered = null"
:class="getClasses(i)"
>
Я так понимаю надо какой-то фильтр применить для отображения?
filters: {
numberOnly: val => /^\d+$/.test(val) ? val : '',
},
<div v-for="n in squares">
{{ n | numberOnly }}
</div>
<div v-for="n in squares">
{{ Number.isNaN(+n) ? '' : n }}
</div>
<div v-for="(n, i) in squares">
{{ i % 11 ? '' : n }}
</div>
data: () => ({
itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
...
}),
<div v-for="n in squares">
{{ itemsToShow.includes(n) ? n : '' }}
</div>
v-model
чекбоксов. Вычисляемое свойство, управляющее выбором всех чекбоксов, переписываете следующим образом: в геттере сравниваете длины массивов всех элементов и выбранных, в сеттере устанавливаете значение вычисляемого свойства выбранных элементов. Например. data: () => ({
items: Array(5).fill(false),
}),
<div class="item" v-for="(n, i) in items">
<div class="parent" @click="$set(items, i, !n)">
<div class="child" :class="n ? 'green' : 'red'">{{ i + 1 }}</div>
</div>
</div>
data: () => ({
active: null,
}),
<div class="item" v-for="i in 5">
<div class="parent" @click="active = active === i ? null : i">
<div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
</div>
</div>
moment.locale('ru');
const formatDate = dateStr => moment(dateStr, 'YYYY.MM.DD').format('D MMMM YYYY');
data: () => ({
dateStr: '2020.06.01',
}),
computed: {
formattedDate() {
return formatDate(this.dateStr);
},
},
methods: {
formatDate1: formatDate,
},
filters: {
formatDate2: formatDate,
},
<div>{{ formattedDate }}</div>
<div>{{ formatDate1(dateStr) }}</div>
<div>{{ dateStr | formatDate2 }}</div>
data: () => ({
items: [],
}),
v-for
экземпляры дочернего компонента, к которым цепляете посредством v-model
элементы массива:<child-component v-for="(n, i) in items" v-model="items[i]"></child-component>
props: [ 'value' ],
computed: {
innerValue() {
return new Proxy(this.value, {
set: (target, prop, val) => {
this.$emit('input', { ...target, [prop]: val });
return true;
},
});
},
},
v-model
:<input type="text" v-model="innerValue.someStringProp">
<input type="checkbox" v-model="innerValue.someBooleanProp">
<input type="number" v-model.number="innerValue.someNumberProp">
data: () => ({
repeat: 0,
}),
<child-component v-for="i in repeat"></child-component>
<button @click="repeat++">add one more child component instance</button>
data: () => ({
items: [ ... ], // массив данных
columns: 666, // количество колонок, на которые надо разбить items
}),
computed: {
columnItems() {
const { items, columns } = this;
const colSize = Math.ceil(items.length / columns);
return Array.from(
{ length: columns },
(n, i) => items.slice(i * colSize, (i + 1) * colSize)
);
},
},
<ul v-for="col in columnItems">
<li v-for="n in col">{{ n }}</li>
</ul>
<img v-for="i in 5" :src="i > ratingValue ? whiteStar : blackStar">
functional: true,
render: (h, ctx) => h('div', Array(ctx.props.количествоПовторений).fill(ctx.slots().default)),
<option
v-for="(n, i) in options"
v-text="n"
v-bind="!i && { disabled: true, value: '' }"
></option>
<option disabled value="">выбирай!</option>
<option v-for="n in options">{{ n }}</option>
data: () => ({
items: [
{ show: true, ... },
{ show: true, ... },
...
],
}),
<template v-for="(n, i) in items">
<button @click="n.show = !n.show">{{ n.show ? 'hide' : 'open' }}</button>
<div class="list" v-show="n.show">
...
</div>
<hr v-if="i !== items.length - 1">
</template>
С v-for я знаю как, а без него никак?