SOURCE

new Vue({
    el: "#example_4",
    data: {
        picked: '',
        toggle: '',
        multiChecked: [],
        selected: '',
        toggle_self: '',
        selected_self: '',
    }
})

<div id="example_4">
    <!-- 当选中时，`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">
    <input type="radio" v-model="picked" value="b">
    <span>{{ picked }}</span><br/>

    <!-- `toggle`类型为非Array时，会忽略value值，直接赋值为 true 或 false 。但是当为数组时，会将value值添加进去-->
    <input type="checkbox" value="1" v-model="toggle">
    <span>{{ toggle }}</span><br/>
    
    <!-- `multiChecked`必须为Array类型时才能将值添加到数组，否则为全选true / false -->
    <input type="checkbox" value="a" v-model="multiChecked">
    <input type="checkbox" value="b" v-model="multiChecked">
    <input type="checkbox" value="c" v-model="multiChecked">
    <span>{{ multiChecked }}</span><br/>

    <!--  -->
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option><!-- 当不存在value特性时，会取内容A作为值 -->
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
    <span>{{ selected }}</span><br/>
    
    <!-- 自定义输出值 -->
    <input
      type="checkbox"
      v-model="toggle_self"
      true-value="yes"
      false-value="no"
    >
    <span>{{ toggle_self }}</span><br/>
    
    <select v-model="selected_self">
        <!-- 内联对象字面量 -->
        <option v-bind:value="{ number: 123 }">123</option>
    </select>
    <span>{{ selected_self }}</span>
    <span>{{ selected_self.number }}</span><br/>
</div>