Vue 데이터 추가 및 삭제

Vue.js는 매우 인기 있는 프런트엔드 프레임워크입니다. 주요 특징은 MVVM(Model-View-ViewModel) 아키텍처 패턴을 사용하는 것입니다. Vue.js의 데이터 바인딩은 가장 중요한 기능 중 하나입니다. 이 기능은 데이터와 뷰를 동기화할 수 있습니다.

Vue.js에서는 간단한 방법으로 추가, 삭제, 확인, 수정 등의 작업을 수행할 수 있습니다. 이 기사에서는 Vue.js의 데이터 추가 및 삭제 작업을 살펴봅니다.

1. 데이터 증가

Vue.js에서는 v-bind 및 v-model 명령을 사용하여 데이터를 바인딩할 수 있습니다. v-bind 지시문은 데이터를 HTML 요소에 바인딩하는 데 사용되며 v-model은 양식 요소와 데이터를 함께 바인딩하는 데 사용됩니다.

데이터가 추가되면 Vue.js에서 제공하는 Vue.set 메서드를 사용하여 속성을 동적으로 추가할 수 있으며, 동시에 객체에 $set 메서드를 사용할 때 Vue가 이 속성의 변경을 모니터링할 수 있도록 보장할 수 있습니다. .

다음은 데이터 추가 예시입니다.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
      </li>
    </ul>
    <form>
      <input v-model="name" type="text" placeholder="Name">
      <input v-model="age" type="number" placeholder="Age">
      <button type="submit" @click.prevent="addItem">Add Item</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ],
      name: "",
      age: ""
    };
  },
  methods: {
    addItem() {
      this.items.push({
        name: this.name,
        age: this.age
      });
      this.name = "";
      this.age = "";
    }
  }
};
</script>

위의 예에서는 v-for 지시문을 사용하여 목록을 렌더링합니다. 양식 양식에서는 v-model 지시어를 사용하여 이름과 나이 값을 바인딩합니다. "항목 추가" 버튼을 클릭하면 addItem 메서드가 실행되고, this.items.push() 메서드를 통해 항목 배열에 새 개체를 추가한 후 양식의 입력 상자를 지웁니다.

2. 데이터 삭제

Vue.js에서 데이터를 삭제하는 방법은 데이터를 추가하는 방법과 매우 유사합니다. Vue.js에서 제공하는 splice 메서드를 사용하여 배열의 요소를 삭제하고 Vue가 모니터링하는지 확인할 수 있습니다. 이 변화. .

다음은 데이터 삭제 예시입니다.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
        <button @click.prevent="removeItem(index)">Remove Item</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ]
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

위의 예에서는 v-for 지시문을 사용하여 목록을 렌더링합니다. 각 목록 항목에 "항목 제거" 버튼을 추가했습니다. 버튼을 클릭하면, this.items.splice() 메소드를 통해 해당 인덱스의 배열 항목을 제거하기 위해 RemoveItem 메소드가 실행됩니다.

3. 요약

일반적으로 Vue.js의 데이터 추가 및 삭제 작업은 매우 간단합니다. Vue.js에서 제공하는 방법을 통해 쉽게 데이터를 조작할 수 있으며, Vue.js가 데이터 변경 사항을 모니터링하여 업데이트하도록 합니다. 동기적으로 봅니다. 개발 중에 다양한 방법을 사용하여 다양한 시나리오에 따라 데이터를 추가하고 삭제할 수 있습니다.

위 내용은 Vue 데이터 추가 및 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!