简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Résumé des instructions couramment utilisées dans Vue

不言
Libérer： 2018-07-26 12:53:23
original
1433 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article est un résumé des instructions couramment utilisées dans Vue. Le contenu est très détaillé. Examinons ensuite le contenu spécifique, dans l'espoir d'aider les amis dans le besoin.

1 Commandes communes

  • Commande v-if

  • Commande v-show

  • Commande v-else

  • Commande v-for

  • Commande v-bind

  • v-model

  • commande v-on

  • commande v-text

1.1 v-if est une instruction de rendu conditionnel, qui supprime et insère des éléments en fonction de l'expression vraie ou fausse. Sa syntaxe de base est la suivante : 

v-if="expression"
Copier après la connexion

expression est une expression qui renvoie une valeur booléenne. be a L'attribut bool peut également être une expression d'opération qui renvoie bool. Par exemple : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                yes: true,
                no: false,
                age: 28,
                name: &#39;keepfool&#39;
            }
        })
    </script>
</html>
Copier après la connexion

Le résultat affiché est le suivant,

Remarque : L'instruction v-if est basée sur la valeur de l'expression conditionnelle Effectuer l'insertion ou la suppression d'éléments .

1.2 directive v-for

v-for rend une liste basée sur un tableau Elle est similaire à la syntaxe de parcours de JavaScript : 

v-for="item in items"
Copier après la connexion

items est un tableau, item est l'élément du tableau actuellement parcouru.

Exemple de code : 


    

        

            
                

                    name
                    age
                


            
            
                

                     {{item.name}}
                     {{item.age}}
Copier après la connexion

1.3 La directive v-bind peut prendre un paramètre après son nom, séparé par deux points. Ce paramètre est généralement un attribut de l'élément HTML, pour. exemple : v-bind:class

v-bind:argument="expression"
Copier après la connexion

1.4 v-model

v-model (la valeur, cochée et sélectionnée sera ignorée une fois l'élément de formulaire défini), couramment utilisée dans les formulaires < ;input> ; et