๊ด€๋ฆฌ ๋ฉ”๋‰ด

๐Ÿ–ฅ dev-ruby

[Vue] #9 - input ๋ณธ๋ฌธ

Vue

[Vue] #9 - input

ruby_s 2021. 8. 6. 11:18
728x90
๋ฐ˜์‘ํ˜•
SMALL

1. input์— ์ž…๋ ฅํ•œ ๊ฐ’ ์•Œ์•„๋‚ด๊ธฐ

์‚ฌ์šฉ์ž๊ฐ€ input์— ๊ฐ’์„ ์ž…๋ ฅํ•  ๋•Œ๋งˆ๋‹ค ์‹คํ–‰๋จ

@input="$event.target.value" //e.target.value๋ž‘ ๊ฐ™์€๊ฑฐ์ž„

2. input์— ์ž…๋ ฅํ•œ ๊ฐ’์„ ๋ฐ์ดํ„ฐ์— ์ €์žฅํ•˜๊ธฐ

  1. ๋ฐ์ดํ„ฐ์— ๋“ฑ๋ก
data(){ return{ month : 1, } },
  1. ์ €์žฅํ•˜๊ธฐ
    <input @input="month = $event.target.value">
  2. ์‚ฌ์šฉํ•˜๊ธฐ - {{ }}์•ˆ์— ์žˆ์œผ๋ฏ€๋กœ ์ค‘๋ณตํ•ด์„œ {} ์•ˆ์จ์ค˜๋„ ๋จ
{{์›๋ฃธ๋“ค[clicked].price * month }}

3. ์ถ•์•ฝ๋ฒ„์ „

์œ ์ €๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์ด month๋กœ ์ €์žฅ๋จ

<input v-model = "month" ><select> , <textarea> ๋“ฑ๋“ฑ์—๋„ ์ ์šฉ ๊ฐ€๋Šฅ

4. input๊ฐ’์„ ์ˆซ์ž๋กœ ์ €์žฅํ•˜๊ธฐ

โ— input์— ์ž…๋ ฅํ•œ ๊ฐ’์€ ์ „๋ถ€ ๋ฌธ์ž์ž๋ฃŒํ˜•์œผ๋กœ ์ €์žฅ๋œ๋‹ค โ—

{{์›๋ฃธ๋“ค[clicked].price month }}
์—ฌ๊ธฐ์„œ ๋Œ€์‹  +๋กœ ์“ฐ๋ฉด input์€ ๋ฌธ์žํ˜•์œผ๋กœ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋’ค์— ๋ถ™๋Š”๋‹ค

<input v-model.number="month" >

4. @change="ํ•จ์ˆ˜๋ช…"

input์ด ๋ฐ”๋€Œ๋ฉด ์‹คํ–‰๋จ

 

728x90
๋ฐ˜์‘ํ˜•
LIST