从 Vue.js 指令返回变量

Question

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指令返回的变量，可以在htmlDOM中使用。我如何创建这样一个自定义指令，其中 returns 一个变量到 html DOM?

注意：我确实在vuejs的source code中搜索了v-for指令源代码，但没有找到。请帮助我得到这个，因为我对 vuejs 很陌生。谢谢你。

编辑:

我现在有什么？

有3个相似的输入组，分别输入'First Name'、'Last Name'和'Address'。每个输入字段都有 label、state、disabled、value 和 max 属性，这些属性存储在 inputOptions 数组中。

<!-- 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
            },
}

我需要实现什么

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

<!-- 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
            },
}

Answer 1

HTML

在您的模板中，使用 v-for 迭代多个 inputOptions，例如：

<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>`
})

FIDDLE

Here is a demo on JSFiddle

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

从 Vue.js 指令返回变量

Returning variables from a Vue.js directive

javascript

vue.js

vuejs2

vue-directives