1.radio、checkbox、select

radio使用

html

• name属性必填，并且在input中保持一致

        <input type="radio" class="a" name="gender" value="women"/>
        <input type="radio" class="a" name="gender" value="man"/>

vue

• v-model保持变量一致
• 优点：双向数据绑定，去除属性name

        <div id="app">
            <input type="radio" value="man" v-model="gender" checked="checked"><span>men</span>
            <input type="radio" value="women" v-model="gender"/><span>women</span>
            <p>select : {{gender}}</p>
        </div>
        <script src="plugin/vue/vue.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data:{
                    gender:""
                }
            })
        </script>

---

checkbox

html

• name属性保持一致

<input type="checkbox" name="sameName" value="diff"/></span>diffTxt</span>
...

2.vue

• 数组

        <div id="app">
            <input type="checkbox" value="alipay" v-model="payway" /><span>alipay</span>
            <input type="checkbox" value="wechat" v-model="payway"/><span>wechat</span>
            <input type="checkbox" value="qq" v-model="payway"/><span>qq</span>
            <p>select : {{payway.join(',')}}...{{payway}}</p>
        </div>
        <script src="plugin/vue/vue.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data:{
                    payway:[]
                }
            })
        </script>

• 对象

html:
v-model = payway.alipay
v-model = payway.qq
v-model = payway.wechat
js:
var vm = new Vue({
    ...
    data:{
        payway:{
            alipay:null,
            qq:null,
            wechat:null
        }
    }
})

---

select

html

• 当option标签中value属性没有定义，提交到服务器为标签中间的文本

<select name="payway">
    <option value="">txt</option>
    <option value="">txt</option>
</select>

vue

        <div id="app">
            <select v-model="payway" multiple="multiple">
                <option v-for="item in results">{{item}}</option>
            </select>
            <p>selected:{{payway}}...{{payway.join(",")}}</p>
        </div>
        <script src="plugin/vue/vue.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    payway: [],
                    results: ["alipay", "qq", "wechat"]
                }
            })
        </script>

---

（学习笔记，借鉴总结）