vue.js가 라디오 버튼, 체크박스, 드롭다운 박스를 구현하는 방법에 대한 공유 예

이 글은 주로 vue.js에서 라디오 버튼, 체크박스, 드롭다운 박스를 구현하는 방법에 대한 예제를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

Vue.js는 양방향 데이터 바인딩을 쉽게 구현할 수 있습니다. , 따라서 양식 처리 및 인간-컴퓨터 상호 작용에 큰 이점이 있습니다. 다음은 HTML 및 Vue.js의 특정 구현을 소개하기 위해 라디오 버튼, 확인란 및 드롭다운 상자를 예로 사용합니다.

1. 라디오 버튼

기존 HTML에서 라디오 버튼을 구현하는 방법은 다음과 같습니다.

<p id="app"> 
 <input type="radio" name="gender" value="man" id="man"/><label for="man">男</label> 
 <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label> 
</p>

참고: 여기서 이름 속성 값은 동일해야 하나만 보장됩니다. 동시에 선택할 수 있습니다. 또한 서버로 전송되는 데이터를 식별하는 데에도 사용됩니다. 값도 매우 중요합니다. 버튼을 선택하면 해당 값이 서버로 전송됩니다.

vue.js를 사용하여 구현하는 것이 더 편리합니다. 예를 들어 라디오 버튼 상자는 다음과 같습니다. 더 이상 name 속성이 필요하지 않습니다. 동시에 하나만 선택되도록 하려면 v-model 지시문을 사용하여 동일한 변수를 각 옵션에 바인딩하면 됩니다. 선택 시 값을 나타냅니다.

<p id="app"> 
 <label>男<input type="radio" v-model="gender" value="man"/></label> 
 <label>女<input type="radio" v-model="gender" value="woman"/></label> 
 <p>已选：{{gender}}</p><!--如果用原生js实现此功能比较麻烦--> 
</p> 
<script> 
 var app=new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   gender:&#39;&#39; 
  } 
 }); 
</script>

2. 체크박스

전통적인 HTML에서 체크박스를 구현하는 코드는 다음과 같습니다.

<p id="app"> 
 <input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label> 
 <input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label> 
 <input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label> 
</p>

위의 코드를 보면 알 수 있듯이 라디오버튼과 체크박스 HTML에서 유형 값이 체크박스가 되고 이름과 값이 체크박스와 선택 상태를 나타내는 데에도 사용된다는 점을 제외하면 상자의 구성 방법은 비슷합니다.

vue.js에서 체크박스를 구성하는 것은 각 옵션 상자가 v-model을 사용하여 변수에 바인딩된다는 점을 제외하면 라디오 버튼과 유사합니다. 이러한 변수는 일반적으로 객체에 배치되거나 v-model에 바인딩됩니다. 동일한 속성 이름 , 속성은 배열입니다. 이 두 가지 상황에 대한 예는 다음과 같습니다.

v-model을 사용하여 각 옵션 상자에 변수를 바인딩합니다.

<p id="app"> 
 <label>jack<input type="checkbox" v-model="person.jack"/></label> 
 <label>bob<input type="checkbox" v-model="person.bob"/></label> 
 <label>alice <input type="checkbox" v-model="person.alice"/></label> 
 <p>已选：{{person}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   person: {jack: false, bob: false, alice: false} 
  } 
 }) 
</script>

위 코드에서 볼 수 있듯이 다음과 같습니다. 각 속성에 바인딩된 값은 부울 유형입니다. 선택하면 값이 true가 되고, 선택하지 않으면 false가 됩니다.

동일한 배열 유형의 속성을 v-에 바인딩합니다. 모델:

<p id="app"> 
 <label>jack<input type="checkbox" v-model="whom" value="jack"/></label> 
 <label>bob<input type="checkbox" v-model="whom" value="bob"/></label> 
 <label>alice <input type="checkbox" v-model="whom" value="alice"/></label> 
 <p>已选：{{whom.join(&#39;|&#39;)}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   whom: [] 
 } 
 }) 
</script>

코드에서 볼 수 있습니다. 각 옵션은 동일한 배열 이름에 바인딩되어 있습니다. 여기서 값 속성이 필요합니다. 선택하면 해당 값이 배열에 추가됩니다. 배열의 해당 값이 삭제됩니다.

3. 드롭다운 상자

HTML을 사용하여 드롭다운 상자를 구성하는 기존 코드는 다음과 같습니다.

<select name="selected"> 
 <option value="a">A</option> 
 <option value="b">B</option> 
 <option value="c">C</option> 
</select>

여기서 이름은 서버로 전송될 때 데이터 식별에 사용됩니다. 값이 선택되면 서버로 값이 전송됩니다. 옵션에서 값을 생략하면 서버로 전송되는 값은 옵션 태그 사이의 값입니다.

vue2.0으로 드롭다운 박스를 구현하는 방법은 다음과 같습니다.

<p id="app"> 
 <select v-model="selected"> 
  <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option> 
 </select> 
 <span>已选:{{selected}}</span> 
</p> 
<script src="vue.js"></script> 
<script> 
 new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   items:[{text:&#39;A&#39;,value:&#39;a&#39;},{text:&#39;B&#39;,value:&#39;b&#39;},{text:&#39;C&#39;,value:&#39;c&#39;}], 
   selected:&#39;&#39; 
  } 
 }); 
</script>

코드에서 알 수 있듯이 옵션 태그를 반복적으로 쓰지 않도록 v-for 명령어를 사용하고, 값 속성을 바인딩하는 v-bind 명령. 항목을 선택하면 해당 옵션의 값이 선택한 변수에 할당됩니다.

HTML로 작성하든 Vue에서 구현하든 다중 선택 드롭다운 상자를 구현해야 하는 경우 select 태그에 multiple 속성만 작성하면 됩니다(동시에 Vue에서는 selected 변수는 빈 배열로 초기화됩니다).

위 내용은 vue.js가 라디오 버튼, 체크박스, 드롭다운 박스를 구현하는 방법에 대한 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!