vue——實例方法 / 數據

目錄

1.vm.$set

2.vm.$watch

3.vm.$delete

1.vm.$set

       哎呀呀，周五啦，大家應該都很開心吧，放假了可以好好休息休息啦，然而小穎明天要面試，所以小穎今天就回去放了個臟衣服完了又急急忙忙從北郊趕回來，心累啊！今天和要面我的小哥聊天時，他拋給我一個問題，其實那個問題小穎在去年做項目時遇到過，不過小穎的解決方法比較笨，哈哈哈,不閑聊啦，我們一起來看看問題是什么:

如何在不通過循環數據給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>