Vue-プロジェクト内のチェックボックス、ラジオボックス、チェックボックスの簡単な操作

Vue.jsはデータの双方向バインドを容易に実現できるため,フォームの処理,ヒューマン・マシン・インタラクションに大きな利点がある.下には、ラジオボックス、チェックボックス、ドロップダウンボックスを例に、HTMLとVueについて説明します.jsにおける具体的な実装方式.

一、単一選択枠

従来のHTMLでラジオボックスを実現する方法は以下の通りです.

  
       
       
    
  :{{gender}} 
  

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

二、チェックボックス

従来のHTMLで実装されているチェックボックスコードは次のとおりです.

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

三、ドロップダウンボックス

従来のHTMLでドロップダウンボックスを構築するコードは以下の通りです.

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