Vueシリーズ8:フォーム入力バインド

v-model(双方向データバインド)を使用してデータtext/textarea checkbox radio select

を自動的に収集

  

       : 
    


      : 
    


      : 
    
     
    
     


      : 
    
      
    
      
    
      


      : 
    
         
      {{city.name}}
    

      : 
    <br/><br/>

    <input type="submit" value="  "/>
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"/>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: ' ',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('     ajax  ')
      }
    }
  })
</script>

</code></pre> 
 </div> 
</div>
                            </div>
                        </div>