Maison > Article > interface Web > Quelles sont les opérations d'interpolation de vue ?

Quelles sont les opérations d'interpolation de vue ?

青灯夜游avant: 2022-03-18 13:02:042224parcourir

Les opérations d'interpolation Vue incluent : 1. Utilisez la syntaxe Moustache, la syntaxe "{{value}}" ; 2. Utilisez l'instruction v-once ; 3. Utilisez l'instruction v-html pour générer du code html ; utilisé pour afficher les données dans l'interface ; 5. Utilisez la commande v-pre ; 6. Utilisez la commande v-cloak.

Quelles sont les opérations d'interpolation de vue ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

6 types d'opérations d'interpolation dans Vue

Le premier : Moustache

Syntaxe Moustache (c'est-à-dire des doubles accolades).
Moustache : barbe/barbe. (Syntaxe Moustache)

Les données sont réactives

Quelles sont les opérations dinterpolation de vue ?

<!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>

Deuxième type : v-once

Cette commande n'a pas besoin d'être suivie d'une expression (telle que la précédente v - for est suivi d'une expression)
Cette instruction signifie que les éléments et les composants ne sont rendus qu'une seule fois et ne changeront pas à mesure que les données changent.

Quelles sont les opérations dinterpolation de vue ?

<!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>

Le troisième type : v-html

Les données demandées au serveur lui-même sont un code HTML

Cette commande est souvent suivie d'un type de chaîne, qui sera le html est analysé et rendu

Quelles sont les opérations dinterpolation de vue ?

<!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>

Le quatrième type : v-text

utilisés pour afficher des données dans l'interface
v-text Normalement , accepte un type
string

Quelles sont les opérations dinterpolation de vue ?

<!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>

Le cinquième type : v-pre

v-pre est utilisé pour

ignorer cet élément et ses sous-éléments Le processus de compilation est utilisé pour afficher la syntaxe originale de Moustache.

Quelles sont les opérations dinterpolation de vue ?

<!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>

Sixième : v-cloak

cloak

Quelles sont les opérations dinterpolation de vue ?

Quelles sont les opérations dinterpolation de vue ? rrre : ee

（Partage de vidéos d'apprentissage :

tutoriel vuejs , front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment changer l'attribut de classe de div dans jqueryArticle suivant：Comment changer l'attribut de classe de div dans jquery

Articles Liés

Voir plus