是否可以使用 Vue 在 HTML 属性中包含双花括号？

Question

假设我想<input value='{{default}}'></input>在常规 HTML 中使用。{{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而不是仅仅使用 htmlvalue属性：

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

这将输出：

{{default}} 在浏览器中。

对于进一步的情况，如果您想绑定 data 选项，value则只需将它们连接起来：

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

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