1.v-show ：表示显示或者不显示

如果值为真

 <div id="app">
        <h1 v-show="2>1">   <!--   值为真   -->
                HAHA
        </h1>
    </div>

会在页面显示

HAHA

如果值为假

   <div id="app">
        <h1 v-show="2>10">     <!--   值为假   -->
                HAHA
        </h1>
    </div>

则页面不会显示

2.v-if与v-show的用法几乎一样，但也有区别，

<body>
    <div id="app">
        <h1 v-show="isTrue"> 
                HAHA
        </h1>
        <h1 v-if="isTrue"> 
                HAHA
        </h1>
        <button @click="isTrue=!isTrue">按钮切换</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    isTrue:true
                }
            },
            mounted() {
                
            },
            methods: {
                
            },
        })
    </script>
</body>

当按下按钮前页面中都会显示，但按下后都会消失，但v-show表示在h1中加上display：none；而v-if是直接消失，

3.例子：完成一个轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .con{
            width: 700px;
            height: 300px;
            position: relative;
            display: flex;
            justify-content: center;
        }
        .index{
           display: flex;
           position: absolute;
           bottom: 10px;

        }
        li{
            margin: 0 10px;
            border-radius: 50%;
            width: 12px;
            height: 12px;
            background: #ccc;
        }
        li.action{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="con"> 
            <img v-for="item,i in list" v-show = "i==active" :src='item' style="width:700px;height: 300px;">
            <ul class="index">
                <li @mouseenter = "hover(i)" v-for = "item,i in list" :class="{action:i === active}"></li>

            </ul>
        </div>
    </div>


    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    active:0,
                    timer:0,
                    list:[
                    "http://p1.music.126.net/2ZGPAckL2T8TdkKIj4c38g==/109951165044618942.jpg?imageView&quality=89",
                    "http://p1.music.126.net/aIKkJXrh6pGj3NwVM0N7ZQ==/109951165044648170.jpg?imageView&quality=89",
                    "http://p1.music.126.net/BJqgHj0NKjJ9Lk1vRcu_RA==/109951165044639311.jpg?imageView&quality=89",
                    "http://p1.music.126.net/ZH9nZ-Kbolx_V0A6gD9QSw==/109951165044601491.jpg?imageView&quality=89"
                    ]
                }
            },
            mounted() {
             this.run()
            },
            methods: {
                run(){
                    this.timer =  setInterval(() => {
                    this.active++
                    if(this.active ===this.list.length) this.active = 0
                }, 1000);
                },
                hover(i){
                    clearInterval(this.timer)
                    this.active =i
                    this.run()
                }
            },
        })
    </script>
</body>
</html>

VUE v-show与v-if

HAHA