<div>Первый блок</div>
<div>Второй блок</div>
<React.Fragment></React.Fragment>
<></>
- это просто короткая запись фрагмента. exports: []
@Module({
imports: [
TypeOrmModule.forFeature([UserEntity, ForgotEntity]),
],
controllers: [UserController],
providers: [UserService],
exports: [UserService] // Экспортируем зависимости данного модуля.
})
export class UserModule{}
@Module({
imports: [
TypeOrmModule.forFeature([PaymentsEntity]),
UserModule // Импортируем его сдесь. Теперь в пределах данного модуля нам доступен UserService.
],
controllers: [PurchaseController],
providers: [PurchaseService]
})
export class PurchaseModule {}
const circles = reactive(Array.from({ length: 10 }, () => {
const size = `${50 + Math.random() * 50 | 0}px`;
return {
left: `${Math.random() * window.innerWidth | 0}px`,
top: `${Math.random() * window.innerHeight | 0}px`,
width: size,
height: size,
};
}));
function onMouseMove({ pageX, pageY }) {
circles.forEach(n => {
const angle = Math.atan2(-pageX + parseInt(n.left), pageY - parseInt(n.top));
n.transform = `translate(-50%, -50%) rotate(${angle}rad)`;
});
}
onMounted(() => document.addEventListener('mousemove', onMouseMove));
onBeforeUnmount(() => document.removeEventListener('mousemove', onMouseMove));
<div v-for="n in circles" :style="n" class="circle"></div>
.circle {
position: absolute;
display: inline-block;
transform: translate(-50%, -50%);
box-sizing: border-box;
border: 10px solid silver;
border-bottom-color: black;
border-radius: 50%;
}
data: () => ({
items: [
{ checked: false, label: '...' },
{ checked: false, label: '...' },
...
],
}),
<label v-for="n in items">
<input type="checkbox" v-model="n.checked">
{{ n.label }}
</label>
computed: {
get() {
return this.items.every(n => n.checked);
},
set(val) {
this.items.forEach(n => n.checked = val);
},
},
<label>
<input type="checkbox" v-model="all">
ALL
</label>