제목을 다음과 같이 다시 작성합니다. 하나의 항목이 true로 설정되고 다른 항목은 모두 false로 설정된 VueJS 반응형 요소
P粉786800174
2023-08-28 20:55:03
<p>VueJS의 구성 API를 사용하여 애플리케이션을 개발하고 있습니다.
아래와 같이 반응형 요소를 설정했습니다</p>
<pre class="brush:php;toolbar:false;">const 섹션 = 반응형({
섹션 1: 사실,
섹션 2: 거짓,
섹션3: 거짓,
섹션4: 거짓,
섹션 5: 거짓,
섹션 6: 거짓
})</pre>
<p>페이지의 각 버튼을 클릭하면 부울 값을 기반으로 개별 요소를 표시하고 숨기려고 합니다(다른 여러 작업 중에서).
이 코드에서 볼 수 있듯이 모든 것을 개별적으로 설정하는 각 버튼에 대한 함수를 작성할 수 있습니다</p>
<pre class="brush:php;toolbar:false;">const section1Button= () =>
섹션.섹션1 = true,
섹션.섹션2 = 거짓,
섹션.섹션3 = 거짓,
섹션.섹션4 = 거짓,
섹션.섹션5 = 거짓,
섹션.섹션6 = 거짓
}
const section2Button= () =>
섹션.섹션1 = 거짓,
섹션.섹션2 = true,
섹션.섹션3 = 거짓,
섹션.섹션4 = 거짓,
섹션.섹션5 = 거짓,
섹션.섹션6 = 거짓
}</pre>
<p>이것은 확실히 작동하지만 실제로는 단 한 번의 변경으로 여러 함수를 작성해야 한다는 의미입니다.
이 작업을 수행하는 더 효율적인 방법이 있습니까?
루프나 if 문을 사용하여 이 작업을 수행할 수 있어야 한다고 생각하는데, 생각이 나지 않습니다.
이것은 stackoverflow에 대한 나의 첫 번째 게시물입니다. 충분한 세부 정보를 제공하지 않은 경우 알려 주시기 바랍니다. </p>
다음과 같이
으아악Array.prototype.reduce
和Object.entries
来循环遍历sections
的键/值对,并根据需要设置true
/false
,从而创建一个新的sections
객체를 사용해 볼 수 있습니다.속성을 직접 수정해야 하는 경우 다음을 사용할 수 있습니다.
으아악Array.prototype.forEach
:도움이 되길 바랍니다!