zoukankan      html  css  js  c++  java
  • 23.数组中哪些有响应式

    <body>
        <div id="app">
            <ul>
                <button @click="add">添加</button>
    
                <li v-for="i in list"> {{ i }} </li>
            </ul>
        </div>
        <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    list: ['a', 'b', 'c', 'd', 'lll'],
                },
                methods: {
                    add() {
                        // this.list.push('+++++'); // 有响应式
                        this.list[0] = "hellow"; // 替换 没有响应式 其实已经改变了 但是没有渲染到页面来!!!!!!!!!
    
                        // 方法1: 如果要替换可以用下面这行代码来实现 
                        // this.list.splice(0, 1, "我是更新后的Li") // 第0个开始 替换1个元素 被替换后的内容
    
                        // 方法2:vue中有set方法也可以实现替换
                        Vue.set(this.list, 0, "我是VUE里面的set方法替换的") // 要替换的数组 把第index个替换  要替换的内容
                            // this.list.pop(); // 删除最后一个元素 有响应式
                            // this.list.shift(); // 删除第一个元素 有响应式
                            // this.list.unshift('嘿 你还好吗') // 在第一个元素前面添加元素 有响应式
                    }
                }
            })
        </script>
    </body>
  • 相关阅读:
    团队个人冲刺day08
    4.26 jQuery AJAX load() 方法
    4.23 jquery
    4.22 AJAX技术
    4.21 正则表达式
    4.20
    4.15 重写团队作业1
    4.12 重写团队作业1
    4.9 团队作业1
    4.7 团队作业1
  • 原文地址:https://www.cnblogs.com/yanglaxue/p/14205758.html
Copyright © 2011-2022 走看看