vue btn state mutation

    [Vue.js] ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง๊ณผ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”ํ•˜๊ธฐ

    [Vue.js] ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง๊ณผ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”ํ•˜๊ธฐ

    v-show ์กฐ๊ฑด๋ถ€ ๋””๋ ‰ํ‹ฐ๋ธŒ๋ฅผ ์ด์šฉํ•˜์—ฌ, vue ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ๋ฒˆํ˜ธ๊ฐ€ 1์„ ๋ฒ—์–ด๋‚˜๋ฉด, ํ•ด๋‹น ์„ค์ • ๋ฒ„ํŠผ ๊ฐ’์„ ์ œ์–ดํ•˜์ง€ ๋ชปํ•˜๋„๋ก ํ•˜๋ ค๊ณ  ํ•œ๋‹ค. v-show๋Š” ์กฐ๊ฑด๋ถ€ ๋””๋ ‰ํ‹ฐ๋ธŒ๋กœ์„œ, ๋ฐ˜ํ™˜ ๊ฐ’์ด true์™€ false ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. ๋‹ค๋ฅธ ๊ฐ’์€ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์—†๋‹ค. true : ํ™”๋ฉด์ด ๋ณด์—ฌ์ง false: ํ™”๋ฉด์ด ์•ˆ๋ณด์ž„ *ํ•˜์ง€๋งŒ, ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ๋กœ ๋ณด๋ฉด, ๋ฒ„ํŠผ์ด ์‚ญ์ œ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๋Œ€์‹ , ๊ฐ’์ด false๊ฐ€ ๋˜๋ฉด, span ํƒœ๊ทธ ์œ„์— ์žˆ๋Š” ::before ์ด ์‚ฌ๋ผ์ง„๋‹ค. ์‚ฌ์šฉ์ „ ์‚ฌ์šฉํ›„ ์ฒ˜์Œ์—, this ๋ฅผ ์ž˜ ๋ชป ์‚ฌ์šฉํ•ด์„œ ๊ณ„์† ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™”๊ฐ€ ์•ˆ๋˜์—ˆ๋Š”๋ฐ, ์ด์œ ๋ฅผ ์•Œ์•˜๋‹ค. ์‚ฌ์‹ค, Vue.js ์—์„œ๋Š” ์กฐ๊ฑด๋ฌธ์„ ์ด์šฉํ•˜์—ฌ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. v-if, v-else, v-else-if ๊ตฌ๋ฌธ์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ, ..