Vue中七个数组的响应式方法

Vue中的响应式方法：改变vue对象中数据的内容，页面的内容也会同步更新。

七个方法分别为：push()、pop()、shift()、unshift()、sort()、reverse()。

<body>
    <div id="app">
        <ul>
            <li v-for= 'each in letters'>{
    
    {
    
    each}}</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','D']
            },
            methods:{
    
    
                btnClick(){
    
    

					// 这七个方式是响应式的！！
                    
                    // 1.push方法
                    // this.letters.push('push');

                    // 2.pop()
                    // this.letters.pop();

                    // 3.shift()
                    // this.letters.shift();

                    // 4.unshift()
                    // this.letters.unshift('unshift');

                    // 5.splice()
                    // this.letters.splice(2,0,'splice')

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

                    // 7.reverse()
                    // this.letters.reverse();

                    // 通过索引修改数组中的元素————> 非响应式的，虽然数组确实被改变了，但是界面不会更新
                    this.letters[0]= 'Bob';
                }
            }
        })

    </script>
</body>

Vue中七个数组的响应式方法

Vue中七个数组的响应式方法

猜你喜欢