vue——实例方法 / 数据

哎呀呀，周五啦，大家应该都很开心吧，放假了可以好好休息休息啦，然而小颖明天要面试，所以小颖今天就回去放了个脏衣服完了又急急忙忙从北郊赶回来，心累啊！今天和要面我的小哥聊天时，他抛给我一个问题，其实那个问题小颖在去年做项目时遇到过，不过小颖的解决方法比较笨，哈哈哈,不闲聊啦，我们一起来看看问题是什么:

如何在不通过循环数据给list数据添加一个showMore属性，并且在moreFun中改变这个新增属性的值，并实现双向绑定？

<template>
    <div id="app">
        <div class="demo">
            <ul>
                <template v-for="(v,index) in list">
                    <li>{{v.name}}</li>
                    <div v-show="!v.showMore">
                        <button @click="moreFun(index)">展示更多</button>
                    </div>
                </template>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            list: [{
                name: '小颖'
            }, {
                name: '仔仔'
            }, {
                name: '黑妞'
            }, {
                name: '土豆'
            }]
        }
    },
    methods: {
        moreFun(index) {
            console.log(this.list);
        }
    }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

一开始小颖并不知道怎么做，而且小颖觉得

                    <div v-show="!v.showMore">
                        <button @click="moreFun(index)">展示更多</button>
                    </div>

这段代码肯定会报错，然而当小颖写上后发现，并没有，后来那位帅锅告诉我，看看vue的 vm.$set 小颖看后将moreFun方法写为:

        moreFun(index) {
            this.$set(this.list[index], 'showMore', true);
            console.log(this.list);
        }

然后就达到小颖想要的结果啦。小颖当时遇到的问题类似于这样的：

<template>
    <div id="app">
        <div class="demo">
            <ul>
                <template v-for="(v,index) in list">
                    <li>{{v.name}}</li>
                    <div v-show="!v.showMore">
                        <button @click="moreFun(index)">展示更多</button>
                    </div>
                </template>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            list: [{
                name: '小颖'
            }, {
                name: '仔仔'
            }, {
                name: '黑妞'
            }, {
                name: '土豆'
            }]
        }
    },
    mounted: function() {
        this.list.forEach(function(element, index) {
            element.showMore = false;
        });
    },
    methods: {
        moreFun(index) {
            this.list[index].showMore = true;
            console.log(this.list);
        }
    }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

问题：当执行完moreFun方法后，虽然list中的showMore属性的值变成了true，但是

<div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div>

按钮展示更多仍然显示着，这是因为，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

所以后来小颖就将showMore直接添加到list中，然后就好啦。现在想想其实用个vm.$set就解决啦。

2.vm.$watch

用法：

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

<template>
    <div id="app">
        <div class="demo">
            <input type="text" class="num1" v-model="num1">
            <label class="sign">-</label>
            <input type="text" class="num2" v-model="num2">
            <label class="sign">=</label>
            <label class="result">{{resultNum}}</label>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            num1: 1,
            num2: 5,
            resultNum: null
        }
    },
    watch: {
        num1: function() {
            var _num1 = parseInt(this.num1);
            var _num2 = parseInt(this.num2);
            this.resultNum = _num1 - _num2;
        },
        num2: function() {
            var _num1 = parseInt(this.num1);
            var _num2 = parseInt(this.num2);
            this.resultNum = _num1 - _num2;
        }
    },
    mounted: function() {
        var _num1 = parseInt(this.num1);
        var _num2 = parseInt(this.num2);
        this.resultNum = _num1 - _num2;
    }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

input.num1,
input.num2 {
    width: 100px;
}

label.sign {
    font-size: 30px;
    vertical-align: -3px;
}

label.result {
    font-size: 20px;
}
</style>

3.vm.$delete

用法：

这是全局 Vue.delete 的别名。

<template>
    <div id="app">
        <div class="demo">
            <ul>
                <template v-for="(v,index) in list">
                    <li>{{v.name}}</li>
                    <li>{{v.age}}</li>
                    <button @click="deleteFun(index)">delete</button>
                </template>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'app',
    data() {
        return {
            list: [{
                name: '小颖',
                age:22
            }, {
                name: '仔仔',
                age:1
            }, {
                name: '黑妞',
                age:1
            }, {
                name: '土豆',
                age:1
            }]
        }
    },
    methods: {
        deleteFun(index) {
            this.$delete(this.list[index], 'age');
        }
    }
}
</script>
<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

vue——实例方法 / 数据

目录

1.vm.$set

2.vm.$watch

3.vm.$delete