2

Vue.js 有一个名为的内置指令v-for，用于对列表进行读写。

HTML 代码

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

脚本代码

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在这里，通过使用该v-for指令，items数组中的元素作为名为 的变量返回item。在这里，该v-for指令返回的变量可以在 html DOM 中使用。如何创建这样一个自定义指令，将变量返回给 html DOM？

注意：我确实在vuejs的源码中搜索了v-fordirectives源码，但是没找到。请帮我解决这个问题，因为我对 vuejs 很陌生。谢谢你。

编辑：

我目前有什么？

有 3 个类似的输入组分别用于输入“名字”、“姓氏”和“地址”。每个输入字段具有存储在数组中的label、state、disabled、value和属性。maxinputOptions

<!-- HMTL -->
<b-input-group :prepend="inputOptions.firstName.label">
    <b-form-input 
        :state="inputOptions.firstName.state" 
        v-model="inputOptions.firstName.value" 
        :disabled="inputOptions.firstName.disabled" 
        :maxlength="inputOptions.firstName.max"
        ></b-form-input>
</b-input-group>

<b-input-group :prepend="inputOptions.lastName.label">
    <b-form-input 
        :state="inputOptions.lastName.state" 
        v-model="inputOptions.lastName.value" 
        :disabled="inputOptions.lastName.disabled" 
        :maxlength="inputOptions.lastName.max"
        ></b-form-input>
</b-input-group>

<b-input-group :prepend="inputOptions.address.label">
    <b-form-input 
        :state="inputOptions.address.state" 
        v-model="inputOptions.address.value" 
        :disabled="inputOptions.address.disabled" 
        :maxlength="inputOptions.address.max"
        ></b-form-input>
</b-input-group>

//脚本

inputOptions: {
            firstName: {
                label: 'First Name',
                state: true,
                value: 'Foo',
                disabled: true,
                max: 45
            },
            lastName: {
                label: 'Last Name',
                state: true,
                value: 'Bar',
                disabled: true,
                max: 45
            },
            address: {
                label: 'Address',
                state: false,
                value: 'Foo, Bar.',
                disabled: true,
                max: 255
            },
}

我需要实现什么

对于每个输入组字段，需要一一提供属性名称。假设我创建了一个名为的 vue 指令mydirective，代码简化如下。

<!-- HMTL -->
<b-input-group v-mydirective="inputOptions.firstName as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

<b-input-group v-mydirective="inputOptions.lastName as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

<b-input-group v-mydirective="inputOptions.address as myProperty" :prepend="myProperty.label">
    <b-form-input 
        :state="myProperty.state" 
        v-model="myProperty.value" 
        :disabled="myProperty.disabled" 
        :maxlength="myProperty.max"
        ></b-form-input>
</b-input-group>

//脚本 

inputOptions: {
            firstName: {
                label: 'First Name',
                state: true,
                value: 'Foo',
                disabled: true,
                max: 45
            },
            lastName: {
                label: 'Last Name',
                state: true,
                value: 'Bar',
                disabled: true,
                max: 45
            },
            address: {
                label: 'Address',
                state: false,
                value: 'Foo, Bar.',
                disabled: true,
                max: 255
            },
}
4

1 回答 1

1

HTML

inputOptions在您的模板中，使用以下方法迭代多个v-for：

<div id="app">
  <b-input-group v-for="option in inputOptions" :key="option.label" :option="option" />
</div>

脚本

为组、输入和标签创建自定义组件，例如：

Vue.component('b-label', {
  props: ['label'],
  template: '<div>{{ label }}</div>'
})

Vue.component('b-form-input', {
  props: ['state', 'value', 'disabled', 'maxlength'],
  template: '<input type="text" :value="value" />'
})

Vue.component('b-input-group', {
  props: ['option'],
  template:
  `<div>
    <b-label :label="option.label" />
    <b-form-input
        :state="option.state"
        v-model="option.value"
        :disabled="option.disabled"
        :maxlength="option.max" />
  </div>`
})

小提琴

这是关于 JSFiddle 的演示

这是一个如何使用组件的基本示例。您需要对字符串进行的任何转换都可以通过computed属性或方法在相关组件中完成。computed您可以通过单击我使用属性将标签转换为小写的链接来查看演示。这应该足以让你继续前进。

于 2019-04-29T04:03:57.400 回答