Vue template interpolation operation (summary sharing)

This article brings you relevant knowledge about vue, which mainly introduces related issues about VUE template interpolation operations, including mustache, v-once, v-html, v -text and so on, let’s take a look at it together, I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

Interpolation operation of template syntax

• v-html Insert html text into the tag

• v-text Insert normal text into the tag (the tag cannot be parsed)

• v-pre displays the mustache syntax directly on the interface

• v-cloak displays the mustache syntax on the interface before the hidden data is rendered to the page

Mustache

Mustache syntax is two curly brackets "{{}}". Mastache syntax can not only write values ​​directly, but also write some simple expressions.

<div>
    <h1 id="counter">{{counter * 2}}</h1>
    <h1 id="message-kebe">{{message}} kebe</h1>
    <h1 id="message-firstName-lastName">{{message + ' ' + firstName + ' ' + lastName}}</h1>
    <h1 id="message-firstName-lastName">{{message}}{{firstName}}{{lastName}}</h1>
    <h1 id="message-firstName-lastName">{{message}} {{firstName}} {{lastName}}</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            counter: 100,
            message: &#39;你好！&#39;,
            firstName: &#39;kebe&#39;,
            lastName: &#39;bryant&#39;
        }
    })

</script>

v-once

The element or component that defines it will only be rendered once. When the value in the variable is modified, the value of the page does not change.

<div>
    <h1 id="未加v-once指令-message">未加v-once指令:{{message}}</h1>
    <h1 id="加v-once指令-message">加v-once指令:{{message}}</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
    })

</script>

Rendering:

v-html

The v-html command will insert the data returned by the backend in the form of html code, and Not inserted as text.

<div>
    <h1 id="url">{{url}}</h1>
    <h1></h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            url: &#39;<a href="http://www.baidu.com">百度一下&#39;
        }
    })
</script>

Rendering:

v-text

Insert input into the tag as text, similar to mustache, but this instruction is not common Used because v-text cannot perform string concatenation.

<div>
    <h1 id="message-kebe">{{message}},kebe</h1>
    <h1 id="kebe">kebe</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
    })
</script>

Rendering:

v-pre

This instruction will tell vue not to parse the expression/text in the label and leave it intact For example, when writing mustache syntax, Vue will parse the value of the variable and insert it into the tag. What if I want to display the mustache syntax on the page in the form of a document? The answer is to use v-pre.

<div>
    <h1 id="message">{{message}}</h1>
    <h1 id="message">{{message}}</h1>
</div>
<script></script>
<script>
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
    })
</script>

Rendering:

v-cloak

When the browser renders HTML, if vue requests the back-end network delay, the data cannot be timely Return and assign a value to a variable, then the browser cannot display the value of the variable and will display the mustache syntax as text on the page. The v-cloak instruction will remove it when Vue parses it. That is to say, we can first use the v-cloak attribute to hide the label. When Vue parses, v-cloak will be automatically removed and the label will be displayed. At this time Variables contained in labels have values. Therefore, there will be no problem of directly displaying expressions due to network delays, thereby improving user experience. However, this instruction is not commonly used in the future, because in actual development, the template of the Vue page will be rendered into a function, and what is actually used is the virtual DOM, so this situation does not exist.

    <style>
        /* 将有带有v-cloak属性的标签隐藏起来  */
        [v-cloak]{
            display: none;
        }
    </style>
    <div>
        <h1 id="message">{{message}}</h1>
        <h1 id="message">{{message}}</h1>
    </div>
<script></script>
<script>
    //延时1秒，模拟网络超时，数据无法及时插入
    setTimeout(function(){
        //vue解析时去掉v-cloak属性，标签显示
        const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: &#39;你好！&#39;
        }
        })
    },1000)
</script>

Rendering:

There is no label with v-cloak attribute, and the expression is displayed directly during the delay

The label with v-cloak attribute will be hidden

There is a v-cloak tag. When vue parses, v-cloak is removed, the tag is displayed, and the value is displayed.

There is no v-cloak tag. When vue parses, give Expression assignment, the displayed expression changes to a specific value

[Related recommendations: javascript video tutorial, web front-end 】

The above is the detailed content of Vue template interpolation operation (summary sharing). For more information, please follow other related articles on the PHP Chinese website!