Vue: ์ˆจ๊ฒจ์ง„ ์š”์†Œ๊ฐ€ v-show๋กœ ๋„ˆ๋ฌด ๋น ๋ฅด๊ฒŒ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒฝ์šฐ ์ „ํ™˜ ํด๋ž˜์Šค`leave-to`๊ฐ€ ์ œ๊ฑฐ๋˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2018๋…„ 03์›” 06์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

๋ฒ„์ „

2.5.13

๋ณต์ œ ๋งํฌ

https://jsfiddle.net/freakypie/nn2vwt7b/22/

์žฌํ˜„ ๋‹จ๊ณ„

vue์—์„œ ๊ฐ’์„ ์ •๋ง ๋น ๋ฅด๊ฒŒ ๋ณ€๊ฒฝํ•˜๋ฉด ์ „ํ™˜์œผ๋กœ ์ธํ•ด ํด๋ž˜์Šค์— ๋‚จ์Œ์ด ์ œ๊ฑฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

๋ผ๋ฒจ์ด ํ‘œ์‹œ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

๋ผ๋ฒจ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค


๋‚ด ์•ฑ์—์„œ ์•ฑ ํ—ค๋”๊ฐ€ ์—†์–ด์•ผํ•˜๋Š” ํŽ˜์ด์ง€๋กœ ๋ฆฌ๋””๋ ‰์…˜ํ–ˆ์ง€๋งŒ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋ฆฌ๋””๋ ‰์…˜ํ–ˆ์ง€๋งŒ ์–ด์จŒ๋“  ํ—ค๋”๊ฐ€ ๋ˆ„๋ฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

์ˆœ๊ฐ„์— ๋Œ€ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ ๋‹น์‹ ์ด ์‚ฌ์šฉํ•  ์ˆ˜์žˆ๋Š” v-if ๋Œ€์‹ ์˜ v-show

๋‹น๋ถ„๊ฐ„ ๋‚˜๋Š” ๊ทธ๊ฒƒ์„ ํญ๋กœํ•˜๊ณ  ์ง€์—ญ ์žฌ์‚ฐ์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

    async "$store.state.invisible"() {
      clearTimeout(this.__updateInvisible);
      this.__updateInvisible = setTimeout(() => {
        this.invisible = this.$store.state.invisible;
      }, 50);
    },

์ €์—๊ฒŒ ํšจ๊ณผ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฒ„๊ทธ์— ๋Œ€ํ•ด ์•Œ๋ ค ๋“œ๋ฆฌ๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

https://github.com/vuejs/vue/issues/5800์˜ ์ค‘๋ณต ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๐Ÿค”

์•„, ๊ทธ๋ž˜, ๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ์ „ํ™˜ ๊ทธ๋ฃน์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๊ฒƒ์ด v-show ์ธ ๊ฒƒ์„๋ณด๊ธฐ ์œ„ํ•ด ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•˜์ง€ ์•Š์•˜์œผ๋ฏ€๋กœ v-for ๋งŒ ํ•  ๊ฒƒ์ด๋ผ๊ณ  ๊ธฐ๋Œ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ด€๋ จ์ด์žˆ๋Š” ๊ฒƒ ๊ฐ™์ง€๋งŒ ๋‹ค๋ฅธ ์›์ธ์œผ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ž ์‹œ ์—ด์–ด ๋‘˜ ์ˆ˜์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” # 7391์— ์˜ํ•ด ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค (์•„์ง ์ถœ์‹œ๋˜์ง€ ์•Š์Œ).

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰