vue에서 json 배열을 생성하는 방법

Vue.js는 웹 애플리케이션 구축을 위한 JavaScript 프레임워크입니다. JSON 배열 생성 및 조작을 포함하여 많은 유용한 기능을 제공합니다. 이 기사에서는 Vue.js를 사용하여 JSON 배열을 생성하는 방법을 소개합니다.

빈 JSON 배열 생성

먼저, Vue 인스턴스에서 빈 배열을 정의하여 얻을 수 있는 빈 JSON 배열을 생성해야 합니다. 다음은 간단한 예입니다.

new Vue({ data: { items: [] } })

이 예에서는 JSON 데이터를 저장하는 데 사용할 "items"라는 빈 배열을 정의합니다. 이제 배열에 데이터를 추가할 수 있습니다.

배열에 JSON 데이터 추가

Vue 인스턴스의 배열에 JSON 데이터를 추가하려면 push() 및 splice()와 같은 Vue의 내장 메서드를 사용할 수 있습니다. 다음은 push() 메서드를 사용하여 배열에 데이터를 추가하는 예입니다.

new Vue({ data: { items: [ { name: 'vue', version: '2.6.11' }, { name: 'react', version: '16.13.1' }, { name: 'angular', version: '9.0.0' } ] }, methods: { addItem: function() { this.items.push({ name: 'jquery', version: '3.5.1' }); } } })

이 예에서는 push() 메서드를 사용하여 Vue 인스턴스에 JSON 개체를 추가하는 "addItem"이라는 메서드를 정의했습니다. "항목" 배열. HTML의 v-on 지시문을 사용하여 이 메소드를 버튼이나 기타 대화형 요소에 바인딩할 수 있습니다.

v-for를 사용하여 JSON 배열을 반복합니다.

Vue는 v-for라는 명령을 제공하는데, 이는 배열, 개체 및 컬렉션을 반복하는 데 사용할 수 있습니다. v-for 지시문을 사용하여 JSON 배열의 각 개체를 HTML 요소로 렌더링할 수 있습니다. 다음은 간단한 예입니다.

 
 {{ item.name }} - {{ item.version }} 
 

이 예에서는 v-for 지시문을 사용하여 Vue 인스턴스의 "items" 배열을 반복하여 각 개체를 HTML 목록 항목으로 렌더링합니다. 목록 항목에서 Mustache 구문을 사용하여 배열 개체의 속성을 문자열로 렌더링할 수 있습니다.

요약

이 글에서는 Vue.js를 사용하여 JSON 배열을 생성하는 방법을 소개했습니다. 빈 JSON 배열을 생성하고, 여기에 데이터를 추가하고, v-for 지시문을 사용하여 배열을 반복하고 HTML 요소로 렌더링하는 방법을 배웠습니다. 이러한 Vue.js 기능을 통해 JSON 데이터를 쉽게 생성 및 조작하고 이를 사용하여 동적 웹 애플리케이션을 구축할 수 있습니다.

위 내용은 vue에서 json 배열을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!