Vue中如何为id绑定内联计算属性

背景

---

有时候我们想要在Vue中为id绑定一个字符串，比如是"index_" + index(第一个"index"是一个字符串，第二个是一个变量)。
问ChatGPT，说Vue中不支持绑定内联的计算属性。以下是ChatGPT的回答。

在Vue中，你可以使用计算属性或者方法来动态生成id属性的值，但是不能直接在模板中使用箭头函数来动态绑定id属性。

以下是两种在Vue中动态生成id属性的常见写法：

使用计算属性：



在上面的示例中，我们定义了一个名为computedId的计算属性，它返回由'remind_'和index组成的字符串。在模板中，我们使用v-bind指令将计算属性的值动态地绑定到img元素的id属性上。

使用方法：



在上面的示例中，我们定义了一个名为getDynamicId的方法，它返回由'remind_'和index组成的字符串。在模板中，我们使用v-bind指令将方法的返回值动态地绑定到img元素的id属性上。

需要注意的是，箭头函数不能直接在模板中使用，因为箭头函数的this指向的是定义时的上下文，而不是Vue实例。因此，你需要使用计算属性或者方法来动态生成id属性的值。

通过使用计算属性或者方法，你可以在Vue中动态生成id属性的值，并实现根据不同条件生成不同的id。这样可以使代码更加灵活和可维护。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

解决方案

---

可以这样绑定一个计算属性，注意最后要调用一下箭头函数，否则绑定的id就是这个箭头函数字符串了。

:id=(() => ‘remind_’ + index)()

1