computed: {
routeAnimation() {
return что-то, зависящее от this.$route;
},
},<transition :name="routeAnimation">
<div :key="routeAnimation"></div>
</transition>this.renderer.createElement('svg');this.renderer.createElement('svg', 'svg');this.renderer.createElement('circle');this.renderer.createElement('circle', 'svg');
Мне этот механизм не понятен.
Как это можно понять, это документированная возможность?
Comment - судя по имени и по коду, он должен рендерить один комментарий, а у вас массив. Наверное, тут нужен ещё один компонент - список комментариев.const Comment = ({ general, job, address }) => (
<li>
<div>first name: {general.firstName}</div>
<div>last name: {general.lastName}</div>
<div>company: {job.company}</div>
<div>address: {address.country}, {address.city}, {address.street}</div>
</li>
);
const CommentList = ({ comments }) => (
<ul>
{comments.map(n => <Comment {...n} />)}
</ul>
);
ReactDOM.render(
<CommentList comments={comments} />,
document.getElementById('root')
);$('.button').click(function() {
const $this = $(this);
const $content = $this.closest('.item').find('.block');
if ($this.hasClass('closed')) {
$this.removeClass('closed').html('Скрыть ↑');
$content.slideDown();
} else {
$this.addClass('closed').html('Показать ↓');
$content.slideUp();
}
}).click();Приходит массив объектов, и в объекте надо менять свойствоenabled: true
соответственно в другом объекте это свойство нужно заменить наfalse.
.highlighted {
color: red;
font-weight: bold;
font-size: 1.5em;
}class App extends React.Component {
state = {
items: [ 'aaa', 'aa1', 'ab1', 'zzz', '00!', 'lorem ipsum dolor...' ],
search: '',
}
render() {
const { items, search } = this.state;
const regex = RegExp(search, 'g');
const replacement = '<span class="highlighted">$&</span>';
return (
<div>
<input value={search} onChange={e => this.setState({ search: e.target.value })} />
{search &&
<ul>
{items.filter(n => n.includes(search)).map(n =>
<li dangerouslySetInnerHTML={{ __html: n.replace(regex, replacement) }} />
)}
</ul>}
</div>
);
}
}const Input = ({ label, ...props }) => (
<div>
<label>
{label}
<input {...props} />
</label>
</div>
);
class App extends React.Component {
state = {
from: 'Москва',
to: 'Питер',
}
onChange = ({ target: { value, name } }) => {
this.setState(() => ({
[name]: value,
}));
}
swap = () => {
this.setState(({ from, to }) => ({
from: to,
to: from,
}));
}
render() {
return (
<div>
<button onClick={this.swap}>swap</button>
<Input label="откуда" value={this.state.from} name="from" onChange={this.onChange} />
<Input label="куда" value={this.state.to} name="to" onChange={this.onChange} />
</div>
);
}
}function onClick() {
const color = `#${(Math.random() * 0xFFFFFF | 0).toString(16).padStart(6, 0)}`;
document.querySelectorAll(`.${this.id}`).forEach(n => {
n.style.backgroundColor = color;
});
}
document.querySelectorAll('li').forEach(n => n.addEventListener('click', onClick));const audio = new Audio();
const queue = [];
audio.onended = function() {
if (queue.length) {
audio.src = queue.shift();
audio.play();
}
};
function play(srcArray) {
queue.push(...srcArray);
if (audio.paused) {
audio.onended();
}
}
play([ '1.mp3', '2.mp3', '3.mp3' ]);Вешаю на него сеттер...
function test(m) {
let money = m;
Object.defineProperty(this, 'money', {
get() {
return money;
},
set(val) {
alert(`Значение свойства money меняется с ${money} на ${val}`);
money = val;
},
});
}function test(m) {
this.money = m;
return new Proxy(this, {
set(target, prop, val) {
alert(`Значение свойства ${prop} меняется с ${target[prop]} на ${val}`);
target[prop] = val;
return true;
},
});
}Есть ли причины так не делать?
@click="pushNumbars() reader.push(*)"img класс лучше переключать у article - максимально дальних не общих предков картинок. Если вдруг захотите при кликах на кнопки стилизовать ещё что-то помимо картинок, или измените взаимное расположение элементов, то не придётся переписывать js-код. Стили, конечно, придётся немного поправить, вместо .active будет .active img.const container = document.querySelector('.container');
const itemSelector = 'article';
const buttonSelector = `${itemSelector} .btn`;
const activeClass = 'active';container.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
button.closest(itemSelector).classList.toggle(activeClass);
}
});container.querySelectorAll(buttonSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));:hover и самой кнопке тоже:.btn:hover {
display: block;
}<div id="container"></div>const container = document.querySelector('#container');
const text = 'hello, world!!';
const delay = 300;
// можно сразу назначить таймауты для каждого из символов текста
for (const [ i, n ] of Array.prototype.entries.call(text)) {
setTimeout(() => {
container.insertAdjacentHTML('beforeend', `<span>${n}</span>`);
}, 300 * i);
}
// или, назначать следующий таймаут после выполнения предыдущего
(function step(i) {
if (i < text.length) {
const span = document.createElement('span');
span.textContent = text[i];
container.insertAdjacentElement('beforeend', span);
setTimeout(step, delay, i + 1);
}
})(0);
// или, вместо множества таймаутов назначить один интервал
let i = 0;
const intervalId = setInterval(() => {
const span = document.createElement('span');
span.innerText = text[i];
container.append(span);
if (++i >= text.length) {
clearInterval(intervalId);
}
}, delay);span {
display: inline-block;
animation: span .2s ease-out;
font-size: 40px;
}
@keyframes span {
from {
transform: translateX(500px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}// хочу добавить в list_appointments_drugs новый объект drug, но получается что добавляю модель this.list_appointments_drugs.unshift(this.drug)
this.list_appointments_drugs.unshift({ ...this.drug })data: () => ({
drug: null,
defaultDrugData: {
...
},
...
}),
created() {
this.resetDrug();
},
methods: {
addDrug() {
this.list_appointments_drugs.unshift(this.drug);
this.resetDrug();
},
resetDrug() {
this.drug = { ...this.defaultDrugData };
},
...
},