vue v-model demo

效果图

子组件

<!-- modelChild.vue -->
<template>
<div>
  我们是TI{{ ame }}冠军
  <el-button @click="playDota2(1)">加</el-button>
  <el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
  props: {
    ame: {
      type: Number,
      default: 8
    }
  },
  // 又来一个用法
  model: { // 自定义v-model的格式
    prop: 'ame', // 代表 v-model 绑定的prop名
    event: 'zard' // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit('zard', newYear)
    }
  }
}
</script>

父组件

<!-- Vmodel.vue -->
<template>
  <div>
    <model-child v-model="ti"></model-child>

    <div style="border: 1px solid red;"></div>

    <el-input v-model="foo" />
    <el-input :value="foo" @input="foo = $event" />
    {{ foo }}

    <div style="border: 1px solid red;"></div>

    <textarea v-model="bar" name="" id="" cols="30" rows="10"></textarea>
    {{ bar }}
    <textarea
      @input="valueOfText = $event.target.value"  
      name="" id="" cols="30" rows="10">{{ valueOfText }}</textarea>
      {{ valueOfText }}

    <div style="border: 1px solid red;"></div>

    <input type="radio" :value="true" v-model="cte">
    <input type="radio" :value="false" v-model="cte">
    {{ cte }}
    <div>
      <input 
        value="1"
        :checked="'1' === fat"
        @change="fat=$event.target.value"
        type="radio">
      <input 
        value="0"
        :checked="'0' === fat"
        @change="fat=$event.target.value"
        type="radio">
        {{ fat }}
    </div>

    <div>
      <!-- 为什么这种情况下有bug呢，不知道 -->
      <input 
        :value="true"
        :checked="true === gar"
        @change="gar=!!$event.target.value"
        type="radio">
      <input 
        :value="false"
        :checked="false === gar"
        @change="gar=!!$event.target.value"
        type="radio">
        gar:{{ gar }}
    </div>
    <div style="border: 1px solid red;"></div>
    <label for="iiii">
      hey
      <input type="checkbox" name="iiii" id="iiii"  v-model="hey" />
    </label>
    {{ hey }}

    <div>
      <div>
        <label for="1">1</label>
        <input 
          value="1"
          id="1"
          :checked="jek.includes('1')"
          @change="onChecked"
          type="checkbox" />
      </div>
      <div>
        <label for="2">2</label>
        <input 
          value="2"
          id="2"
          :checked="jek.includes('2')"
          @change="onChecked"
          type="checkbox" />
      </div>
      <div>
        <label for="3">3</label>
        <input 
          value="3"
          id="3"
          :checked="jek.includes('3')"
          @change="onChecked"
          type="checkbox" />
      </div>


        {{ valueOfCheckbox }}
    </div>


  </div>
</template>
<script>
import ModelChild from './modelChild.vue';
export default {
  components: {
    ModelChild
  },
  data() {
    return {
      ti: 8,
      foo: 1,
      bar: '123',
      valueOfText: '455',
      cte: true,
      deti: true,
      fat: '0',
      gar: false,
      hey: '1',
      jek: [],
      valueOfCheckbox: [],
    }
  },
  methods: {
    onChecked(event) { 
      const checked = event.target.checked
      const value = event.target.value
      const index = this.valueOfCheckbox.indexOf(value)
      if (checked && index === -1) {
        this.valueOfCheckbox.push(value)
      } else { 
        this.valueOfCheckbox.splice(index, 1)
      }
    }
  }
}
</script>