vue 学习----响应式2

最新推荐文章于 2024-10-01 20:12:28 发布

相见啊

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量94

点赞数

文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_41962068/article/details/108726296

版权

问：要如何响应式的更新数组和对象？

更改数组：
1. 利用数组变异方法：push、pop、shift、unshift、splice、sort、reverse
2. 利用vm.$set/Vue.set实例方法
3. 利用vm.$set或Vue.set删除数组中的某一项

vm.$set是Vue.set的别名
使用方法：Vue.set(object, propertyName, value)，也就是这个意思：Vue.set(要改谁，改它的什么，改成啥)

vm.$delete是Vue.delete的别名
使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个)


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        1.数组  
        通过数组的 方式 渲染数组
        索引的方式更改数组
        
        渲染数组的变异方法
        push  pop  shift转移 unshift插入  splice拼接 sort排序 reverse颠倒

        > 更改数组用变异方法，就够了
        更改对象就用vm.\$set和vm.\$delete

    -->


    <div id="app">
        {{arr}}

    </div>

    <script src="../vue.js"></script>

    <script>
        const dj = new Vue({
            el: '#app',
            data: {
                arr: [1, 2, 3, 2, 4]
            }
        });



        // $set(要改谁，改什么，改成什么)和  vue.set  两者用法一样
        dj.$set(dj.arr, 2, 12222);
        // 添加
        vm.$set(vm.deng, 'secondWife', '铁锤妹妹');
        // 删除
        vm.$delete(vm.deng, 'height')；
    </script>
</body>

</html>