Vue basic introduction notes 05: V-for, V-IF

Time:2021-9-17

Vue basic introduction notes 05

  1. V-IF deletes or creates elements every time
  2. V-show every display: none or block

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="app">
        < button @ Click = "show =! Show" > button < / button >
        <!--  V-IF deletes or creates elements every time -- >
        <p v-if='show'>show</p>
        <!--  Every time display: none or block -- >
    
        <p v-show='show'>show</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               show:true
           },
           methods:{}
        });
    </script>
    </body>
    </html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]