월루를 꿈꾸는 대학생

[Vue] $data 본문

Programing/Vue

[Vue] $data

하즈시 2023. 11. 11. 02:30
728x90

 

$data

 

현재 인스턴스의 데이터 객체에 접근하기 위한 속성 

Vue인스턴스 내의 데이터를 동적으로 조작할 수 있음 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js $data Example</title>
  <!-- Vue.js CDN 추가 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateData">Update Data Using $data</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    updateData() {
      // $data를 사용하여 데이터 직접 조작
      this.$data.message = 'Data Updated!';
    }
  }
});
</script>

</body>
</html>

 

$data.message로 데이터 바인딩을 할 수 있음

 

---

 

      <select v-for="filter in filters" :key="filter.name" class="form-select" v-model="$data[filter.name]">
        <option v-for="option in filter.items" :key=option>{{ option }}</option>
      </select>
      
      <script>
export default {
  data() {
    return {
      title: '',
      type: 'movie',
      number: 10,
      year: '',
      filters: [
        {
          name: 'type',
          items: ['movie', 'series', 'episode']
        },
        {
          name: 'number',
          items: [10, 20, 30]
        },

 

반복문 사용할 때 양방향 데이터 바인딩을 써서 각 셀렉트들의 값들을 어느 변수랑 연동할지 $data[변수명]으로 확인 가능 

728x90

'Programing > Vue' 카테고리의 다른 글

[Vue] router-link  (0) 2023.11.10
[Vue] router-view  (0) 2023.11.10
[Vue] npm run dev  (0) 2023.11.03
'Programing/Vue' Related Articles more