Vue 데이터 동적 추가 및 동적 바인딩 아이디어(그림 및 텍스트)

이 기사의 내용은 Vue 데이터의 동적 추가 및 동적 바인딩 아이디어(그림 및 텍스트)에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

사례부터 시작하겠습니다

먼저 분석해 보겠습니다. 과목을 선택할 때 다음은 과목에 대한 전체 점수 설정도 추가합니다.

과거 jquery 작성 아이디어: 체크하면 dom 노드를 생성한 다음, 상위 노드에 dom 노드를 추가합니다. 프로젝트는 분리된 방식으로 상호 작용하므로, 설정된 과목 만점 값은 . 한 단계 더 나아가: 전체 점수 값을 설정하는 모든 입력을 먼저 바인딩한 다음 표시 및 숨기기를 제어하면 목적은 달성되지만 일단 배경에서 옵션을 얻은 후에는 배경이 변경되면 그에 따라 변경됩니다.

데이터 기반 보기 아이디어를 최대한 활용하세요.

Code snippet

1 설명: 이 함수는 함수에 의해 전달된 값이 배열에 포함되어 있는지 확인하는 데 사용됩니다. 메소드는 배열을 반복하는 데 사용됩니다. 배열에 있는 객체의 주제 값이 전달된 값과 동일합니까?를 참조하십시오. 동일하면 배열에 이 항목이 포함되어 있음을 의미하며, 이는 이 주제가 이미 확인되었음을 의미합니다. Edge 삭제는 원래 배열의 값을 직접 변경하고 Vue로 뷰를 업데이트하는 splic 메서드(Vue의 변형 메서드)를 사용합니다.

2. 설명: 전체 점수 값 루프의 배열을 정의합니다

3 설명: 이 배열은 위의 CheckBox 데이터입니다. v-for 루프 자세히 쓰기

위 내용은 Vue 데이터 동적 추가 및 동적 바인딩 아이디어(그림 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!