vue.js $set的使用数组

Document.blue {color: blue;}{{$index}}.{{ item.msg }}vm.items.splice(index,

barnettyj

18680人浏览 · 2017-02-28 22:48:55

barnettyj · 2017-02-28 22:48:55 发布

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
    .blue {
        color: blue;
    }
    </style>
</head>

<body>
    <div id="example-1">
        <ul>
            <template v-for="item in items">
                <li>
                    {{$index}}.{{ item.msg }}

                    <button v-on:click="f5(item)">vm.items.splice(index, 1)</button>

                    <button v-on:click="f6(item)">vm.remove</button>
                </li>
            </template>
        </ul>

        
        <ul>
            <li>
                <button v-on:click="f1">vm.items[0] = {} 失效</button>
            </li>
            <li>
                <button v-on:click="f2">vm.items.$set(0, { childMsg: 'Changed!'}) </button>
            </li>
            <li>
                <button v-on:click="f3">vm.items.length = 0 失效</button>
            </li>
            <li>
                <button v-on:click="f4">vm.items={}</button>
            </li>
        </ul>
        <div class="blue">
            {{$data | json }}
        </div>
        <pre>
        因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：
        直接用索引设置元素，如 vm.items[0] = {}；
        修改数据的长度，如 vm.items.length = 0。
        </pre>
    </div>
    <script>
    var vm = new Vue({
        el: '#example-1',
        data: {
            items: [{
                msg: 'Foo'
            }, {
                msg: 'Bar'
            }, {
                msg: 'George'
            }]
        },
        methods: {
            f1: function() {
                vm.items[0] = {}; // 失效
            },
            f2: function() {
                vm.items.$set(0, {
                    childMsg: 'Changed!'
                })
                
                 vm.items.$set(2, {
                    msg: 'dongtao!'
                })
            },
            f3: function() {
                vm.items.length = 0; // 失效
            },
            f4: function() {
                vm.items = {}
            },
            f5: function(item) {
                var index = this.items.indexOf(item) //Search an array for the item
                if (index !== -1) {
                    this.items.splice(index, 1) //Selects a part of an array, and returns the new array
                }
            },
            f6: function(item) {
                this.items.$remove(item)
            }
        }

    })
    </script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^