vue 属性 传入 变量 动态属性

Dynamic Arguments

1. <component
   
2.     :[getConfigType()]="getConfigValue"
   
3.     :api="formData[scope.$index][cindex]['api']"
   
4.     :key="updatekey"
   
5.     :placeholder="formData[scope.$index][cindex].placeholder"
   
6.     :is="head.tag"
   
7.     :elData="head"
   
8.     :disabled="formData[scope.$index][cindex].formOperates == G.FORM_OPERATE.READ ? true : false"
   
9.     v-model="formData[scope.$index][cindex].value"
   
10.     v-bind="getConfById(head.formId)"
    
11.     @change="getCustomConfig({
    
12.     row:scope.$index,
    
13.         cIndex: cindex,
    
14.             tag: head.tag,
    
15.                 type:G.CUSTOM_CONFIG.EVENT,
    
16.                     eventFrom:G.EVENT_FROM.CHANGE
    
17.     })"
    
18. >
    
19.         
    
20.         
    
21.         methods: {
    
22.             //用一个方法来生成属性值
    
23.             getConfigValue() {
    
24.             },
    
25.                 //用一个方法来生成一个属性名
    
26.                 getConfigType() {
    
27.                     alert()
    
28.                     return 'test'
    
29.                 },

复制代码

New in 2.6.0+

Starting in version 2.6.0, it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:

<!--
Note that there are some constraints to the argument expression, as explained
in the "Dynamic Argument Expression Constraints" section below.
-->

<a v-bind:[attributeName]="url"> ... </a>

Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:

<a v-on:[eventName]="doSomething"> ... </a>

<a v-bind:['foo' + bar]="value"> ... </a>

<form v-on:submit.prevent="onSubmit"> ... </form>


参考：
https://vuejs.org/v2/guide/syntax.html



如果是传入多个动态属性

参考：

https://stackoverflow.com/questi ... l-parameters-in-vue

let data = {
  param1: 'val1',
  param2: 'val2',
  param3: 'val3'
}
<div v-bind="data"></div>