首页 > 其他分享> > 现在对了，是大写了

现在对了，是大写了

2022-02-23 15:34:45 作者：互联网

<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.capitalize="myText"></my-component>
     
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({   
       data() {
          return {
             myText: ''
             }
             }
             });
    app.component('my-component', {
       props: {
          modelValue: String,
          modelModifiers: {
             default: () => ({})
             }
             },
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `
    <input 
      :value="modelValue"
      @input="emitValue">
      <label> {{ modelValue }}</label>
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}).mount('#v-model-example')
</script>

这样也可以

<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.capitalize="myText"></my-component>
     {{ myText }}
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({   
       data() {
          return {
             myText: ''
             }
             }
             });
    app.component('my-component', {
       props: {
          modelValue: String,
          modelModifiers: {
             default: () => ({})
             }
             },
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `
    <input 
      :value="modelValue"
      @input="emitValue">
      
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}).mount('#v-model-example')
</script>

这样也可以

<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model.capitalize="myText"></my-component>
     {{ myText }}
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({   
       data() {
          return {
             myText: ''
             }
             }
             });
    app.component('my-component', {
       props: {
          modelValue: String,
          modelModifiers: {
             default: () => ({})
             }
             },
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `
    <input 
      :value="modelValue"
      @input="emitValue">
      <label> {{ modelValue }}</label>
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}).mount('#v-model-example')
</script>

标签：modelModifiers,capitalize,app,component,value,大写,现在,modelValue
来源： https://blog.csdn.net/weixin_40945354/article/details/123091063