是否可以使用 Vue 在 HTML 屬性中包含雙花括號？

Question

假設我想在常規 HTML 中使用<input value='{{default}}'></input> 。 將顯示以{{default}}作為默認輸入的文本框。

但是我正在嘗試用 Vue 做這樣的事情，但是不會按預期工作

<md-input value='{{document_url}}'></md-input>

我得到的錯誤是

in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-c9c99006","hasScoped":false,"preserveWhitespace":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./components/template-heuristic-cases.vue
(Emitted value instead of an instance of Error)

Answer 1

使用v-bind而不是僅使用 html value屬性：

<input :value="'{{default}}'">

這將輸出：

{{default}}在瀏覽器中。

---

對於進一步的情況，如果您想在value綁定數據選項，則只需將它們連接起來：

<input :value="'{{'+mydata+'}}'">

// ... inside data option:
mydata: 'my default'

Answer 2

有類似的情況，只需完成：

<input :value="document_url">

如果在 HTML 元素之外，請使用帶雙花括號的版本：

<span>{{document_url}}</span>