vue 基础 循环变量 v-for

vue 基础 循环遍历

一、v-for遍历数组

   <div id="app">
        <!-- 1.遍历时没有索引值 -->
        <ul>
            <li v-for='item in names'>{{item}}</li>
        </ul>
        <!-- 2.在遍历时，获取索引值 -->
        <ul>
            <li v-for="(item,index) in names">{{index}}-{{item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                names:['why','kobe','jsm','dos']
            }
        })
    </script>

说明：
1.遍历时可以加索引值 然后用插值表达式 展示

 <li v-for="(item,index) in names">{{index}}-{{item}}</li>

二、v-for遍历对象

     <div id="app">
            <!-- 1.在遍历对象时，只获取一个值，获取到的是value -->
            <ul>
                <li v-for="item in info">{{item}}</li>
            </ul>
            <!-- 2.获取key 和额Value 格式(value,key)-->
            <ul>
                <li v-for="(value,key) in info">{{value}}--{{key}}</li>
            </ul>

            <!-- 3.获取key 和额Value 格式(value,key,index)-->
            <ul>
                <li v-for="(value,key,index) in info">
                    {{value}}--{{key}}--{{index}}
                </li>
            </ul>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    info: {
                        names: "why",
                        age: 18,
                        height: 1.88,
                    },
                },
            });
        </script>

说明：
1.在 遍历对象时 可以 加入 键名 键值 索引

   <li v-for="(value,key,index) in info">
           {{value}}--{{key}}--{{index}}
   </li>

三、vue中变量数组的方法

        <div id="app">
            <!-- 加key提高性能 -->
            <ul>
                <li v-for="item in letters">{{item}}</li>
            </ul>
            <button @click="btnClick">按钮</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    letters: ["A", "B", "C", "D", "E"],
                },
                methods: {
                    btnClick() {
                        //1.push尾部添加
                        this.letters.push("aaaa");
                        //2.pop尾部删除
                        this.letters.pop();
                        //3.首位删除
                        this.letters.shift();
                        //4.首位添加
                        this.letters.unshift('6666');
                        //5.splice(start , 几个 ,) 
                        // 删除(开始位置，删除个数)
                        // 替换(开始位置，替换个数，替换的元素)
                        // 插入(开始位置,0,插入的元素)

                        //6.sort() 排序
                        this.letters.sort();

                        //7.反转reverse()
                        this.letters.reverse() 

                        // 通过索引修改数组中的元素 不是响应式的  不监听
                        this.letters[0]='bbb'

                        // 8.set(要修改的对象，索引值，修改后的值)
                        Vue.set(this.letters,0,'bbbbb')
                    },
                },
            });
        </script>

说明：
1.这些方法都行响应式的