65.从 Vue.js 自定义输入框深入理解 v-model about cc

[otizis]

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 小数位
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // 如果值不统一，手动覆盖以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件发出数值
      this.$emit('input', Number(formattedValue))
    }
  }
})

官网例子中有这个例子

不是很明白这个if里面的事情，因为我理解后面$emit更新后，input的value会跟着变，是不是多此一举了？

// 如果值不统一，手动覆盖以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件发出数值
      this.$emit('input', Number(formattedValue))

[plh2]

大哥，这个难了点，
据说v-model是语法糖，，

[plh2]

自定义 checkbox 按钮中使用 v-model（我也写了一个新的）

// App.vue
<template>
  <div class="wrap">
    <v-input id="s1" v-model="selected"/>
    <v-input id="s2" v-model="selected"/>
    <v-input id="s3" v-model="selected"/>
    <v-input id="s4" v-model="selected"/>
    {{selected}}
	</div>
</template>
<script>
import Input from './Input.vue';
export default {
  components: {Input},
  data:()=>({
    selected: []
  })
}
</script>

// Input.vue 组件文件 
<template id='input'>
  <label :for="id">
    <input type="checkbox" :checked="checkVal()" :id='id' @input="updateValue">
    <slot />
  </label>
</template>
<script>
export default {
  name:'v-input',  
  model: {
    prop: 'selected',
    event: 'input'
  },
  props: {
    id: {
      type: String,
      required: true
      // default: '需要一个独一无二的id'+ ~~(Math.random()*1000) + 999
    },
    selected: {},
  },
  methods: {
    checkVal(){
      return this.selected.includes(this.id)
    },
updateValue(e) {
      let newVal = [...this.selected]
      if (e.target.checked) {
        newVal.push(this.id)
      } else {
        newVal.splice(newVal.indexOf(this.id), 1)
      }
      this.$emit('input', newVal)
    }
  }
};
</script>

[sfsoul]

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 小数位
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // 如果值不统一，手动覆盖以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件发出数值
      this.$emit('input', Number(formattedValue))
    }
  }
})

官网例子中有这个例子

不是很明白这个if里面的事情，因为我理解后面$emit更新后，input的value会跟着变，是不是多此一举了？

// 如果值不统一，手动覆盖以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件发出数值
      this.$emit('input', Number(formattedValue))

并没有多次一举啊。 将if那段代码注释掉，往input中输入内容是没有限制的，并不是只到了小数点后两位就停止了。同时input标签的value值也不全等于formattedValue,而是等于输入框中输入的值。这点我也好奇为啥会这样...