javascript - Vue 错误Uncaught TypeError: todo[i].css는 함수가 아닙니다.

Question

할 일 목록을 만들 때 버튼을 클릭하면 완료되지 않은 할 일 목록이 표시되고, 완료된 항목을 숨기면 완료되지 않은 모든 항목이 표시되는 방식입니다.
그러나 배열의 항목을 순회하면 인덱스 값을 얻을 수 있지만 CSS는 변경할 수 없습니다

으아악 으아악

실례합니다. 무슨 일이 있었나요? ?진심으로 도움을 요청합니다

Answer 1

todo[i].css('display', 'none'); 이것이 JQuery가 CSS 스타일을 변경하는 방법입니다.
당신이 게시한 코드에서 JQuery를 참조하는 것을 볼 수 없습니다

Vue에서 JQuery가 참조되지 않으면 네이티브 JS만 사용하여 CSS 스타일을 수정할 수 있습니다

예:

으아악

Answer 2

vue의 아이디어는 DOM을 최대한 적게 조작하고, 버튼을 클릭할 때 해당 상태의 항목 표시를 전환하려는 경우, 계산된 속성을 사용하여 해당 데이터를 필터링하세요

Answer 3

Vue는 데이터를 통해 스타일을 바인딩하는 솔루션을 제공하므로 나머지 답변은 정확하지 않습니다.

으아악

Answer 4

1층 정답입니다. Vue 애플리케이션에서 데이터 기반 개발 모델을 채택하여 DOM 작업을 줄여보세요. DOM의 관련 데이터는 데이터에서 미리 초기화되거나 계산되어 처리됩니다. 전체 비즈니스 로직은 데이터만 작동하므로 이에 대응하여 DOM을 업데이트하는 목적을 달성합니다. 포스터로 인해 발생하는 이 오류는 분명히 CSS를 설정하는 방식이 잘못되었기 때문입니다. js 또는 jquery를 사용하여 CSS를 변경하는 방법을 확인하세요.