一、单选框的数据双向绑定
<template>
<div>
<p>
<label>
<input type="radio" name="st" value="c" v-model="styles">颜色
</label>
<label>
<input type="radio" name="st" value="b" v-model="styles">品牌
</label>
</p>
</div>
</template>
<script>
export default {
data() {
return {
styles: 'c'
}
},
}
</script>
<style lang="scss" scoped>
</style>
二、复选框的双向数据绑定
<template>
<div>
<p>
<label>
<input type="radio" name="st" value="c" v-model="styles">颜色
</label>
<label>
<input type="radio" name="st" value="b" v-model="styles">品牌
</label>
</p>
<div v-show="styles === 'c'">
<p>
红色
</p>
<p>
白色
</p>
</div>
<div v-show="styles === 'b'">
<p>
丰田
</p>
<p>
大众
</p>
</div>
<div>
<label>
<input type="checkbox" v-model="read">我已阅读协议
</label>
<button :disabled="!read">提交</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
styles: 'c',
read: false,
}
},
}
</script>
<style>
</style>
