Vue.js는 데이터의 양방향 연결을 편리하게 실현할 수 있기 때문에 표를 처리하고 인간과 기계의 상호작용에 있어 큰 장점을 가진다.아래에는 HTML과 Vue에 대해 단일 선택 상자, 확인란 및 드롭다운 상자를 예로 들 수 있습니다.js의 구체적인 실현 방식.

1. 싱글 프레임

기존 HTML에서 단일 상자를 구현하는 방법은 다음과 같습니다.

주: 같은 시간에 하나만 선택될 수 있도록 여기name 속성 값이 같아야 합니다.서버에 전송된 데이터를 식별하는 데 사용됩니다.value 값도 중요합니다. 단추가 선택되면 서버에 보냅니다.
쓰다js는 단일 선택 상자를 실현하는 것이 비교적 편리하다. 예를 들면 다음과 같다.우리는name 속성을 더 이상 필요로 하지 않습니다. v-model 명령을 사용하여 모든 옵션에 같은 변수를 연결하면 같은 시간에 하나만 선택되었을 뿐만 아니라value 속성은 선택되었을 때의 값을 나타냅니다.

     
     
    
 ：{{gender}}



    var app=new Vue({
        el:'#app',
        data:{
            gender:''
        }
    });

2. 확인란

기존 HTML의 확인란 코드는 다음과 같습니다.

    jack
    bob
    alice

상기 코드에서 볼 수 있듯이 HTML에서 콤보 상자와 콤보 상자의 구조 방법은 유사하다. 단지 type 값이 checkbox로 바뀌었을 뿐,name와value로 콤보 상자와 선택 상황을 나타낸다.
vue.js에서 구성된 체크 상자도 단일 선택 상자와 유사합니다. 단지 모든 옵션 상자는 v-model로 변수를 연결합니다. 이런 변수는 일반적으로 하나의 대상에 놓거나 v-model에 같은 속성 이름을 연결하고 속성은 그룹입니다.이 두 가지 상황에 대한 예는 다음과 같다.
v-model을 사용하여 각 옵션 상자에 변수를 바인딩합니다.

    jack
    bob
    alice 
    
 ：{{person}}


    var app = new Vue({
        el: '#app',
        data: {
            person: {jack: false, bob: false, alice: false}
        }
    })

상기 코드에서 볼 수 있듯이 여기는value 속성이 필요하지 않습니다. 모든 속성에 연결된 값은boolean 형식입니다. 당선되었을 때 이 값은true로 바뀌고false로 선택되지 않았습니다.
v-model에 같은 그룹 형식의 속성을 연결합니다.

    jack
    bob
    alice 
    
 ：{{whom.join('|')}}


    var app = new Vue({
        el: '#app',
        data: {
            whom: []
    }
    })

코드에서 볼 수 있듯이 모든 옵션에 같은 그룹 이름을 연결합니다. 여기에는value 속성이 필요합니다. 선택될 때 상응하는value 값이 그룹에 추가됩니다. 선택을 취소할 때 그룹에 대응하는value 값을 삭제합니다.

3. 드롭다운 상자

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

    A
    B
    C

이 중에서name는 서버에 보낼 때의 데이터 식별에 사용되며,value는 선택할 때 서버에 보낼 값입니다.옵션에서value를 생략하면 서버에 보내는 값은option 탭 사이의 값입니다.
vue2.0으로 드롭다운 상자를 구현하는 방법은 다음과 같습니다.

    
        {{item.text}}
    
     :{{selected}}



    new Vue({
        el:'#app',
        data:{
            items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],
            selected:''
        }
    });

코드에서 볼 수 있듯이 v-for 명령을 사용하여 옵션 라벨을 반복적으로 쓰는 것을 피하고 v-bind 명령으로value 속성을 연결합니다.중 하나를 선택하면 이 옵션의value 값은selected 변수에 부여됩니다.
html 쓰기든 vue 구현이든 다중 선택 상자를 실현하려면 select 탭에multiple 속성을 쓰기만 하면 됩니다. (동시에 vue에서selected 변수는 빈 그룹으로 초기화됩니다.)