Overview
In the process of learning Vue, the learning of instructions is indispensable. Let’s introduce the difference between interpolation expressions in Vue, v-text and v-html based on a little experience of our own work and learning.
Interpolation expression
We know that page loading is top-down, and js loading is synchronous. When the page is refreshed frequently or the internet speed is slow, we use the interpolation expression page will first appear'{
{message}}', and then replace the'{
{message}}' with real data (simulating this phenomenon can be vue The introduction of .js is placed behind the body, or the speed of network requests can be adjusted to 3G)
<!--这是我们的View-->
<div id="app">
<p>{
{message}}</p>
</div>
new Vue({
el: '#app',
data: {
message:"hello world!",
}
})
The solution to the above problem is v-cloak, this instruction can hide uncompiled tags until the instance is ready. Will not be displayed until the end of compilation.
<div id="app">
<p v-cloak>{
{message}}</p>
</div>
<style>
[v-cloak]{
display: none;
}
</style>
At this time, when we visit the page,'{ {message}}' will no longer appear . When the Vue data transfer is completed, the data will be displayed correctly.
v-text
<div id="app">
<p v-cloak>{
{message}}</p>
<p v-text="message"></p>
</div>
The display effect is the same as the interpolation expression, and there will be no flickering of '{ {message}}'. Then some students will ask why the interpolation expression is necessary with v-text? Tell everyone the difference between the two through the following code:
<div id="app">
<p v-cloak>你好世界：{
{message}}</p>
<p v-text="message">你好世界：</p>
</div>
operation result:
Conclusion: Interpolation expression is equivalent to a placeholder, it will only replace the content occupying the position, v-text can only display the data passed by the Vue object, and will replace the existing content in the node.
v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<p v-cloak>{
{message}}</p>
<p v-text="message"></p>
<p v-html="message"></p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:"<h1>Hello World!</h1>",
}
})
</script>
</html>
operation result:
Conclusion: Interpolation expressions and v-text cannot parse html tags, but v-html can parse html tags
to sum up
- If you only display the data in the Vue object separately, it is recommended to use the "v-text" command.
- If you want to display the user's foreground data at the same time, you need to use an interpolation expression, but don't forget to use it with the "v-cloak" attribute (and you need to set the style [v-cloak]{display:none;}).
- If the data passed by the Vue object contains HTML tags, use v-html