Vue2.x radio和checkbox值绑定

checkbox选中v-model的值

<template>
    <div class="MyModelComp">
        <div>自定义checkbox value</div>
        <div>
            <input type="checkbox" true-value="huangbiao" false-value="huanghaili" v-model="checkboxValue"/>
        </div>
        <div>
            {{checkboxValue}}
        </div>
    </div>
</template>

<script>
  export default {
    data: function () {
      return {
        checkboxValue: ''
      }
    },
    methods: {
      inputChnageAction: function (event) {
        // 抛出父组件的值，将改变的值传递给父组件
        this.$emit("huangbiao", event.target.value);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .MyModelComp {
    }
</style>

技术点

1. true-value定义的值表示选中的 v-model的值
2. false-value定义的值表示没有选中的 v-model的值

radio选中v-model的值

<input type="radio" v-model="pick" v-bind:value="a">

技术说明

1. 当选中时 vm.pick === vm.a