VueJs 라디오 버튼을 통한 심플한 토굴링
저의 요구는 이런 것입니다.
두 개의 라디오 버튼(활용지와 일반 용지)이 있습니다.
사용자가 Live Paper(활용지)를 선택한 경우 다른 2개의 htmlinput elements(datatime-local,time)을 표시할 필요가 있습니다.
사용자가 [Normal Paper](일반 용지)를 선택한 경우 이 두 개의 추가 입력 요소를 숨깁니다.vueJ를 통해 이를 실현하려면 어떻게 해야 합니까?
이건 내 암호야
<div class="row">
<div class="col">
<input type="radio" name="paper" value="">Live Papaer
<br>
Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
</div>
<div class="col">
<input type="radio" name="paper" value="">Normal Paper
</div>
</div>이름 있는 속성을 초기화합니다.selected데이터 옵션에서
new Vue({
el:"#app",
data(){
return{
selected: 'live'
}
}
})
바인드selected양쪽 무선 입력에 대한 특성.를 참조해 주세요.value무선 입력 속성이 로 설정됩니다.live그리고.normal각각 다음과 같다.
세우다v-if조건부로 렌더링할 div에서 선택합니다.그v-if의 경우에만 해당됩니다.selected === 'live'
<div id="app">
<div class="row">
<div class="col">
<input type="radio" name="paper" v-model="selected" value="live">Live Papaer
<div v-if="selected === 'live'">
Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
</div>
</div>
<div class="col">
<input type="radio" name="paper" v-model="selected" value="normal">Normal Paper
</div>
</div>
다음의 메뉴얼을 참조해 주세요.
또한 커뮤니티에서 VueJ의 View바인딩과 폼을 이해하기 위한 많은 리소스를 찾을 수 있습니다.
언급URL : https://stackoverflow.com/questions/49402691/vuejs-simple-togooling-with-radio-buttons
'programing' 카테고리의 다른 글
| 비트 필드를 사용하는 것은 어떤 경우에 가치가 있습니까? (0) | 2022.08.01 |
|---|---|
| 부호 없는 데이터 유형은 무엇입니까? (0) | 2022.08.01 |
| ==와 Integer.valueOf(String)의 비교 결과가 127과 128에 대해 다른 이유는 무엇입니까? (0) | 2022.08.01 |
| GCC의 C/C++ 소스에서 어셈블러 출력을 얻는 방법은 무엇입니까? (0) | 2022.08.01 |
| C에 문자열 배열을 작성하려면 어떻게 해야 하나요? (0) | 2022.07.31 |