vue-表单数据

1.

	<div id="test">
      <form action="" @submit.prevent="handleSubmit"><!--阻止了默认行为-->
        用户名：<input type="text" v-model="username" /><br />
        密码：<input type="password" v-model="pwd" /><br />

        <input type="radio" value="男" v-model='sex'>男
        <input type="radio" value="女" v-model='sex'>女<br/>

        <input type="checkbox" value="篮球" v-model='hobby'>篮球
        <input type="checkbox" value="足球" v-model='hobby'>足球
        <input type="checkbox" value="乒乓球" v-model='hobby'>乒乓球
        <input type="checkbox" value="地球" v-model='hobby'>地球<br/>


        <span>城市：</span>
        <select v-model='cityName'>
            <option value="">未选择</option>
            <option :value="city.name" v-for='(city,index) in citys' :key='index'>{{ city.name }}</option>
            <!--加上v-bind指令（简写形式是 :），不然只会单纯作为字符串解析，无法获取到值-->
        </select><br/>

        <textarea rows="10" v-model='desc'></textarea><br/>

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

    <script src="./vue.js"></script>
    <script>
      new Vue({
        el : '#test',
        data:{
            username : '',
            pwd : '',
            sex : '男',
            hobby : ['篮球'],
            cityName:'',
            desc : '',
            citys : [{name:'广州'},{name:'上海'},{name:'北京'}]
        },
        methods: {
          handleSubmit: function(e) {
            console.log(this.username,this.pwd,this.sex,this.hobby,this.cityName,this.desc)
          }
        }
      });
    </script>

html页面初始显示：

html页面输入值：

点击注册后台打印：