0
点赞
收藏
分享

微信扫一扫

这段代码有啥问题,为啥运行不出来

产品喵dandan米娜 2022-02-23 阅读 56
<!DOCTYPE html>
<div id="v-model-example" class="demo">
   <my-component v-model:title="bookTitle"></my-component>
   {{ bookTitle }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
     return {
         bookTitle: ''
       }
  },
    });
    app.component('my-component', {
  props: {
   modelValue: String,
   modelModifiers: {
             default: () => ({})
             }
  },
  
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
      `,
      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>
   {{ bookTitle }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      data() {
     return {
         bookTitle: ''
       }
  },
    });
    app.component('my-component', {
  props: {
   modelValue: String,
   modelModifiers: {
             default: () => ({})
             }
  },
  
  emits: ['update:modelValue'],
  template: `
    <input
      type="text"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
      `,
      created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
   }).mount('#v-model-example')
</script>




举报

相关推荐

0 条评论