javascript - vue 템플릿의 변수가 true가 아닌 경우 기본값

Question

문제 설명:

으아아아

다음으로 렌더링됨

으아아아

원하는 효과:
"--"처럼 변수가 true가 아닐 때 global기본값이 있기를 바랍니다

내 시도

으아아아

효과는 얻을 수 있지만 너무 피곤해요. 하나하나 적어야 합니다. 귀찮아서 수정했어요

으아아아

원하는 도움:
그러나 위의 작성 방법은 여전히 ​​편리하지 않은 것 같습니다. 값이 true가 아닐 때 <section>{{x.a}}</section>을 쓸 수 있는 방법이 있습니까? 원래 데이터 x가 다음과 같은 경우 템플릿에서 "--"로 렌더링됩니다. 오염되지 않았습니다

Answer 1

필터를 사용하여 이 효과를 얻을 수 있습니다:

으아악 으아악

그래도 너무 번거롭다고 생각된다면 더 많은 블랙테크 방법을 사용할 수 있습니다.

으아악

설명하자면, _s는 Vue의 내부 속성입니다. 템플릿의 모든 텍스트 노드가 이 방법으로 처리되며, 반환 값이 렌더링되므로 버전이 업데이트될 때 안정성이 보장되지 않습니다. 주목해야합니다. 데모 첨부:
https://codepen.io/cool_zjy/p...

Answer 2

삼항 연산자를 사용할 수 있습니다.

으아악

이것은 if 판단문과 동일합니다.

Answer 3

데이터의 x 값을 수정할 위치에 대한 개인적인 생각을 알려주세요:

1. 작성시 수정한 후 수정된 곳에서 처음 사용한 단락 동작을 직접 사용해도 충분합니다

2. 뷰를 초기화한 뒤 수정한다면 그냥 초기값을 '--'로 설정하면 괜찮지 않나요?