在Vue.js中如何转义双引号

Question

我想把一个值绑定到我的组件上，但是我在转义双引号方面遇到了麻烦。

这个是可行的：

<span>{{ config.pages["pageKey"].components[0].display }}</span>

但并非如此:

<MyComponent v-bind:componentConfig="config.pages[\"pageKey\"].components[0]" />

有任何想法如何做到这一点吗？

- B. Bri

---

你尝试过 <MyComponent v-bind:componentConfig='config.pages["pageKey"].components[0]' /> 吗？ - Daniel Gale

Answer 1

最好的方法是使用 "

<MyComponent v-bind:componentConfig="config.pages[&quot;pageKey&quot;].components[0]" />

- KitKit

Answer 2

尝试使用单引号:

<MyComponent v-bind:componentConfig="config.pages['pageKey'].components[0]" />

或者：

<MyComponent v-bind:componentConfig='config.pages["pageKey"].components[0]' />

- user9215105

---

第一种方式更好。它是HTML :) - Bhojendra Rauniyar

我可以使用点符号来访问对象的属性。这样更加清晰。 - Yosvel Quintero

这是一个好主意。我只是用最小的改动纠正了他的错误。 - user9215105

Answer 3

属性访问器通过使用点符号或方括号符号提供对对象属性的访问。

使用点符号更加简洁：

<MyComponent v-bind:componentConfig="config.pages.pageKey.components[0]" />

- Yosvel Quintero