The difference between Vue interpolation expression and v-text directive

{{message}} syntax can only be used in tag content

{{}} This syntax is called an interpolation expression. You can write any legal js expression in the interpolation expression.

1. Use plugin expressions

When using plugin expressions, there is a content flickering problem, but v-text does not have a flickering problem

<div id="app">

    <p>

        {{message}}

    </p>
   <p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>

<script>

    let vm = new Vue({

        el:"#app",  

        data:{ 

        message:"hello vue"

    }

    })

</script>

In the above code, if the output is normal, the result is consistent.

However, if the network speed is slow, the plugin expression will be output on the page first.

{{message}}

The page will then be rendered normally, which is not good enough for the user experience.

2. Use v-cloak in plugin expressions to solve the flickering problem

<style>

    [v-cloak]:



    display:none;

}

</style>

<div id="app">

    <p v-cloak>

        {{message}}

    </p>

    <p v-text="message"></p>

</div>

<script src="./js/vue.js"></script>

We can use the v-cloak attribute to hide it at runtime, but vue will automatically delete v-cloak attribute at the end of the run.

So this method can be used to solve the flickering problem

3. Plugin Expression

Plugin expressions only insert content and do not overwrite the original content, while v-text will overwrite the original content.

<div id="app">

    <p>

        ----{{message}}----

    </p>

    //----hello vue----

    <p v-text="message">1234556</p>

    // hello vue

</div>

<script src="./js/vue.js"></script>
<script>

    let vm = new Vue({

        el:"#app",

         data:{
       message:"hello vue"
    }
    })

</script>

This is the end of this article about the difference between vue interpolation expressions and v-text directives. For more information about the difference between vue interpolation expressions and v-text directives, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!