What are the operations of vue interpolation?

青灯夜游
Release: 2022-03-18 13:02:04
forward
2219 people have browsed it

Vue interpolation operations include: 1. Use Mustache syntax, syntax "{{value}}"; 2. Use v-once instruction; 3. Use v-html instruction to output html code; 4. Use The v-text command is used to display data in the interface; 5. Use the v-pre command; 6. Use the v-cloak command.

What are the operations of vue interpolation?

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

6 types of interpolation operations in Vue

The first one: Mustache

  • Mustache syntax (that is, double braces).
  • Mustache: beard/beard. (Mustache syntax)

Data is responsive

What are the operations of vue interpolation?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}},world!</h2>
        <h2>{{counter * 2}}</h2>
        <h2>{{message}} {{counter}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello&#39;,
                counter:200
            },
            methods: {

            }
        })
    </script>
</body>

</html>
Copy after login

Two types: v-once

  • This instruction does not need to be followed by any expression (for example, the previous v-for was followed by an expression)
  • This directive means that elements and components are only rendered once and will not change as the data changes.

What are the operations of vue interpolation?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello&#39;
            }
        })
    </script>
</body>

</html>
Copy after login

Third type: v-html

The data requested from the server itself is an HTML code

This instruction is often followed by a string type, which will parse the string's HTML and render it

What are the operations of vue interpolation?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{link}}</h2>
        <h2 v-html>{{link}}</h2>
        <h2 v-html="link"></h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                link: &#39;<a href="http://www.baidu.com">百度一下</a>&#39;
            }
        })
    </script>
</body>

</html>
Copy after login

The fourth type: v-text

  • The function of v-text is similar to Mustache: both are used For displaying data in the interface
  • v-text Normally, accepts a string type

What are the operations of vue interpolation?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message2"></h2>
        <h2 v-text="message2">{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello&#39;,
                message2:&#39;World&#39;
            }
        })
    </script>
</body>

</html>
Copy after login

The fifth type: v-pre

v-pre is used toskip this element and its sub-elements The compilation process is used to display the original Mustache syntax.

What are the operations of vue interpolation?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script>
        let app=new Vue({
            el:&#39;#app&#39;,
            data:{
                message:&#39;Hello&#39;
            }
        })
    </script>
</body>
</html>
Copy after login

Sixth type: v-cloak

  • may be directly Apparently uncompiled Mustache tag
  • cloak: cloak

What are the operations of vue interpolation?

What are the operations of vue interpolation?##

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>Hello,{{name}}</h2>
        <h2 v-cloak>Hello,{{name}}</h2>
    </div>
    <script>
        setTimeout(()=>{
            let app=new Vue({
                el:&#39;#app&#39;,
                data:{
                    name:&#39;World&#39;
                }
            })
        },10000)
    </script>
</body>
</html>
Copy after login
(Learning video sharing:

vuejs tutorial, web front-end)

The above is the detailed content of What are the operations of vue interpolation?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
vue
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template