vue Template Syntax Interpolation Details

1. Text

The most common form of data binding is text interpolation using the 'Mustache' syntax (double parentheses):

<span>message:{{msg}}</span>

Using v-once instruction, you can also perform once interpolation. When the main sentence changes, the contents of interpolation will not be updated.

But be careful that this time it affects all data bindings on the node:

<span v-once>this will nver change:{{message}}</span>

2. Pure html

Doubles parentheses interpret data as plain text, not html. To output html, you can use the v-html directives:

<div v-html="rawhtml"></div>

Inserted content is treated as HTML--data binding is ignored. Note that you cannot use v-html to

Compound local templates, because vue is not a string-based template engine. Components are more suitable for single UI reuse and composition of the basic unit.

An arbitrary html that is dynamically rendered on a site can be very dangerous because it can easily lead to an XSS attack.

Use html interpolation only for trusted content, never for user-provided content.

3. Attributes

Mustache cannot be used in the html attribute, use the v-bind directive;

<div v-bind:id="dynamicId"></div>

This is also valid for Boolean properties--the property is removed if the condition is evaluated to flase

<button v-bind:disabled="someDynamicCondition">Button</button>

4. Use the JavaScript expression

So far, in our template, we have bound simple attribute key values for 1 straight value. But in fact, for

All data bindings, Vue. js provide full Javascript expression support

{{nunber+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>

These expressions are resolved as oh JavaScript under the data scope of the vue instance to which they belong.

Each restriction is that each binding can only contain a single expression, so the following will not take effect

// This sentence is a statement, not an expression 
{{var a = 1}}
// Flow control will not take effect, please use 3 Meta-expression 
{{if(ok){return message}}}

Template expressions are placed in sandboxes and only one white list of global variables, such as Math and Date, can be accessed.

You should not attempt to access user-defined global variables in template expressions