vue中v-if,v-show和v-for指令

一、v-if,v-show

    <div id="root">
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                show: true

            },
            methods: {
                handleClick: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>

区别：

1.v-if,div标签会被清除

2.v-show,div标签添加样式“display: none;”

二、v-for

    <div id="root">
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>

    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                list: [1, 1, 3],

            }
        })
    </script>

v-for="item of list"