vue中監聽屬性

本文轉載自查看原文 2020-02-20 14:56 1278 vue

監聽屬性可以針對某個屬性進行監聽，當監聽的屬性的值發生了變化，則會執行相應的函數。

監聽的函數要寫在vue的watch屬性中。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue中監聽屬性</title>
</head>

<body>
    <div id="app">
        <div>
            <label>查詢：</label>
            <input type="text" v-model:value="keyword">
        </div>
        <span>結果：{{ret}}</span>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                keyword: '',
                ret: '',
            },
            watch: {
                keyword(searchWord, retWord) {
                    this.ret = '正在加載...'
                    setTimeout(()=>{
                        this.ret = searchWord
                    },1000);
                }
            }
        })
    </script>
</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue之watch監聽對象中某個屬性的方法 Vue之watch監聽對象中某個屬性的方法對vue中的computed屬性，watch監聽，計算屬性理解 vue監聽數組中某個屬性，計算其他屬性問題 vue(七)--監聽屬性（watch） vue的屬性監聽 vue屬性監聽 Vue屬性監聽 Vue計算屬性和監聽屬性 vue中watch監聽一個對象中屬性的變化