๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/Vue

[Vue.js] Vue์—์„œ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2022. 6. 6.
๋ฐ˜์‘ํ˜•

๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜์ธ {{ }} ์•ˆ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‘œํ˜„์‹์„ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค.

<!DOCTYPE html>
<head>
  <title>Javascript Expression</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <p>{{ message + "!!!" }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  </script>
</body>
</html>

 

ํ•˜์ง€๋งŒ ๋ถ„๊ธฐ ๊ตฌ๋ฌธ(if๋ฌธ ๋“ฑ๋“ฑ), ์„ ์–ธ๋ฌธ(var a = 10; ์ด๋Ÿฐ๊ฒƒ), ๊ทธ๋ฆฌ๊ณ  ์œ„์™€ ๊ฐ™์ด ๋ณต์žกํ•œ ์—ฐ์‚ฐ(message.split('').reverse().join(''))์€ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. 

๋ฐ˜์‘ํ˜•

'JavaScript > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vue.js] computed ์†์„ฑ๊ณผ methods ์†์„ฑ์˜ ์ฐจ์ด์   (0) 2022.06.06
[Vue.js] Vue Directive  (0) 2022.06.06
[Vue.js] v-bind  (0) 2022.06.06
Named View  (0) 2022.06.06
Nested Router  (0) 2022.06.06

๋Œ“๊ธ€