1. Text
The most common form of data binding is text interpolation using the ‘Mustache’ syntax (double brackets):
<span>message:{{msg}}</span>
Using the v-once directive, one-time interpolation can also be performed. When the main sentence changes, the content at the interpolation will not be updated.
But please be careful that this time affects all data bindings on this node:
<span v-once>this will nver change:{{message}}</span>
2. Pure html
Doubles brackets interpret the data as plain text, not html. To output html, you can use the v-html directive:
<div v-html="rawhtml"></div>
The inserted content is treated as HTML--data binding will be ignored. Note that you cannot use v-html to
Composite local templates, because vue is not a string-based template engine. Components are more suitable for the basic units of single-person UI reuse and composite.
Arbitrary html rendered dynamically on the site can be very dangerous because it can easily lead to XSS attacks.
Please only use html interpolation for trusted content and never interpolate content provided by users.
3. Properties
Mustache cannot be used in html attributes, the v-bind directive should be used;
<div v-bind:></div>
This is also valid for Boolean properties - if the condition is evaluated to flase, the property is removed
<button v-bind:disabled="someDynamicCondition">Button</button>
4. Use JavaScript expressions
So far, we have always bound simple attribute key values in our templates. But in fact, for
All data bindings provide complete Javascript expression support
{{nunber+1}}
{{ok?'YES':'NO'}}
{{('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>
These expressions will be parsed as JavaScript under the data scope of the vue instance.
Each limitation is that each binding can only contain a single expression, so the following will not take effect.
//This sentence is a sentence, not an expression{{var a = 1}}
//Flow control will not take effect either, please use a ternary expression{{if(ok){return message}}}
Template expressions are placed in the sandbox and can only access a whitelist of global variables, such as Math and Date.
You should not attempt to access user-defined global variables in template expressions
The above is the detailed explanation of the vue template syntax - interpolation introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!