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 중국어 웹사이트의 기타 관련 기사를 참조하세요!