1、v-if 代码实例：

 <div id="app">
        <p v-if="isShow" :style="color">hello world</p>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isShow: true,
                color: {
                    background: "red"
                }
            },
            methods: {
                handleClick() {
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

2、v-for代码实例：

 <div id="app">
        <!--
             index 下标
             item  元素
        -->
        <div v-for="(item,index) of arr">
            {{index}}--{{item}}
        </div>
        <div v-for="(item,index) of obj">
            {{index}}---{{item}}
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                arr: ["22", "zz", "xx"],
                obj: {
                    name: "cheng",
                    age: "20",
                    sex: "male"
                }
            }

        })
    </script>

v-for实例应用：

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        .item img {
            width: 100px;
        }

        .item {
            margin-top: 15px;
        }

        #app {
            width: 398px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    </style>

    <div id="app">
        <div class="item" v-for="(item,index) of movies">
            <img :src="item.imgUrl" alt="">
            <h6>{{item.title}}</h6>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                movies: []
            },
            mounted() {
                $.ajax({
                    url: "https://douban.uieee.com/v2/movie/top250",
                    type: "GET",
                    dataType: "jsonp",
                    success: res => {
                        var subjects = res.subjects;
                        var movies = [];
                        subjects.forEach(res => {
                            var title = res.title;
                            var imgUrl = res.images.small;
                            var temp = {
                                title,
                                imgUrl
                            }
                            movies.push(temp);
                        });
                        this.movies = movies;
                    }
                })
            },
        })

    </script>