VueJS - 라디오 버튼 선택에 다른 div를 표시하는 방법

-1

라디오 버튼 선택에 다른 구성 요소를 표시하는 방법.VueJS - 라디오 버튼 선택에 다른 div를 표시하는 방법

<input type="radio" name="book" value="One" checked="checked"> 
<input type="radio" name="book" value="Round"> 

     <div> // this should show show default, One is selected 
     <p>Value One</p> 
     </div> 
     <div> // this should show show on radio change to Round selected 
     <p>Value Round</p> 
     </div>

출처

2017-12-16 Balram Sharma

어때?

출처

2017-12-16 10:28:53

을 숨 깁니다 각 함수를 호출 .onclick 자바 스크립트로했을

new Vue({ el: '#app', data: { x: 'one', }, });

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> <div id="app"> <input type="radio" v-model="x" value="one"> <input type="radio" v-model="x" value="two"> <div v-show="x === 'one'">One</div> <div v-show="x === 'two'">Two</div> </div>

귀하의 경우 두 구성 요소가 즉시 생성되므로 v-if를 사용하십시오. 이 시나리오에서는 사소한 문제이지만 큰 구성 요소로 인해이 문제가 발생할 수 있습니다. –

굉장! 감사합니다. 토마스, 간단합니다 : P. 원할 경우 v-if를 나중의 요구 사항에 맞게 공유하십시오. –

내가 그것을 내가 V-쇼를 대체 할 & 쇼 요소의 반대를

function rdone(){ 
 
    document.getElementById('one').style.display ='block'; 
 
    document.getElementById('round').style.display ='none'; 
 
} 
 
function rdround(){ 
 
    document.getElementById('round').style.display = 'block'; 
 
    document.getElementById('one').style.display ='none'; 
 
}

#round{ 
 
display:none; 
 
}

<input type="radio" name="book" value="One" checked="checked" onclick="rdone();"> 
 
<input type="radio" onclick="rdround();" name="book" value="Round"> 
 

 
     <div id=one> // this should show show default, One is selected 
 
     <p>Value One</p> 
 
     </div> 
 
     <div id=round> // this should show show on radio change to Round selected 
 
     <p>Value Round</p> 
 
     </div>

출처

2017-12-16 10:43:45

제안 해 주셔서 감사합니다. 그러나 VueJS에 대한 구체적인 내용을 찾고있었습니다. –

VueJS - 라디오 버튼 선택에 다른 div를 표시하는 방법

답변

관련 문제