|
1
2
3
|
props: {
uploadImage : String
}
|
cs |
|
1
|
<div class="upload-image" :style="{backgroundImage: `url(${uploadImage})`}"></div>
|
cs |
백틱 기호 넣기
'공부 > Vue' 카테고리의 다른 글
| Vue.js for문 돌면서 고유 id 설정하는 방법 (0) | 2022.12.13 |
|---|
전체 글
- [Vue3] prop 로 받아온 이미지 url 넣는 방법 2022.12.23
- Vue.js for문 돌면서 고유 id 설정하는 방법 2022.12.13
- React : 상위 요소 클릭 안되게 하는 법 2022.11.27
- React : 동적 UI 만들기 2022.11.26
[Vue3] prop 로 받아온 이미지 url 넣는 방법
2022. 12. 23. 10:10
Vue.js for문 돌면서 고유 id 설정하는 방법
2022. 12. 13. 16:33
|
1
2
3
4
5
6
|
<tbody>
<tr v-for="(element) in addressBookList" :key="element.id">
<td><input type="checkbox" name="cbc" v-bind:id="element.id"></td>
</tr>
</tbody>
|
cs |
'공부 > Vue' 카테고리의 다른 글
| [Vue3] prop 로 받아온 이미지 url 넣는 방법 (0) | 2022.12.23 |
|---|
React : 상위 요소 클릭 안되게 하는 법
2022. 11. 27. 22:33
Blog.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/* eslint-disable */
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function Blog() {
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<h4 onClick={() => { console.log('h4클릭') }}> 제목
<span onClick={() => { console.log('span클릭') }}> 😆 </span>
</h4>
</div>
);
}
export default Blog;
|
cs |
이런 식으로 h4 태그, span 태그 두개에 이벤트를 걸어 놓았다면, 아래와 같이 span 태그 안에 있는 내용 클릭 시 h4 클릭 이벤트도 함께 발생하게 된다. (이걸 이벤트 버블링이라 한다.)
# span 에만 이벤트가 발생하게 하고 싶을 땐?
|
1
|
<span onClick={(e) => { e.stopPropagation(); console.log('span클릭') }}> 😆 </span>
|
cs |
span 태그에 (e) 를 넣어주고 e.stopPropagation(); 을 넣어주면 된다!!
▲ 결과!!
'공부 > React' 카테고리의 다른 글
| React : 동적 UI 만들기 (0) | 2022.11.26 |
|---|---|
| React : 컴포넌트 사용하기 (0) | 2022.11.26 |
| React : state 가 array/object 일 때 데이터 변경하기 (0) | 2022.11.17 |
| 리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기 (0) | 2022.11.17 |
| React : terminal > 경고메세지 안나오게 하는 방법 (0) | 2022.11.17 |
React : 동적 UI 만들기
2022. 11. 26. 21:32
# 제목 눌렀을 때 Modal 창 띄우고 다시 눌렀을 때 Modal 창을 닫는 방법
여기서 제목 글자를 클릭했을 때 아래의 상세보기 창이 나오고 안나오고를 반복하고 싶을때는 state 를 사용 하면 된다.
Blog.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function Blog() {
let [modal, setModal] = useState(false);
return (
<div className="App">
<div className='list'>
<h3>제목</h3>
<p>11월 26일 발행</p>
</div>
{
modal == true ? <Modal></Modal> : null
}
</div>
);
}
function Modal() {
return (
<>
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
</>
)
}
export default Blog;
|
cs |
modal 이라는 state 를 선언해주고, 초기 값을 false 로 두어 처음 로딩 시에는 Modal 창이 안보이게 해준다.
그리고 14~16 째 줄과 같이 { } 안에 삼항연산자로 modal 이 true 이면 Modal 컴포넌트를 보이게 하고, false 이면 null 을 주고 아무것도 보이지 않게 한다.
(react 에는 {} 안에 if 문 사용 불가)
|
1
2
3
4
|
<h3 onClick= {() => {
setModal(true);
}}>
제목</h3>
|
cs |
h3 태그에 Click 이벤트를 줘서 modal 을 true 로 바꿔주면, Modal 창이 보이게 된다.
하지만 이렇게만 해주면 보이게만 하고 다시 사라지게 하는건 할 수 없는데 ,,,
# setModal(!modal)
|
1
2
3
4
5
|
<h3 onClick= {() => {
setModal(!modal);
}}>
제목
</h3>
|
cs |
이렇게 해주면!!!! Modal 이 사라졌다 나타났다 한다.
현재 modal 변수가 true 상태이면 false 로 바꿔주고, modal 변수가 false 상태이면 true 로 바꿔주는 코드이다.
(오...)
마치 스위치 ON/OFF 기능처럼 state 를 사용하는 것이다.
'공부 > React' 카테고리의 다른 글
| React : 상위 요소 클릭 안되게 하는 법 (0) | 2022.11.27 |
|---|---|
| React : 컴포넌트 사용하기 (0) | 2022.11.26 |
| React : state 가 array/object 일 때 데이터 변경하기 (0) | 2022.11.17 |
| 리액트 TODO 리스트 만들기 : #4 좋아요 💕 기능 만들기 (0) | 2022.11.17 |
| React : terminal > 경고메세지 안나오게 하는 방법 (0) | 2022.11.17 |