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

Question

Let's say I want to have <input value='{{default}}'></input> in regular HTML. The textbox with {{default}} as a default input will be displayed.

However I'm trying to do such thing with Vue but, won't work as expected

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

The error I'm getting is

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

Use the v-bind instead of just using html value property:

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

This will output:

{{default}} in the browser.

---

For further case, if you want to bind the data option in the value then just concatenate them:

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

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

Answer 2

Had similar situation and simply accomplished with:

<input :value="document_url">

if outside of HTML element, use version with double curly braces:

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