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>
(学习笔记,借鉴总结)