前端进阶Vue框架-----watch（监听）

小不言啊

已于 2022-02-17 16:14:39 修改

阅读量172

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-17 16:12:51 首次发布

本文链接：https://blog.csdn.net/m0_61656944/article/details/122985761

版权

该博客探讨了Vue.js框架中如何处理异步数据更新的问题。通过一个实例展示了在watch对象中使用setTimeout来模拟异步操作，并过滤数组以根据用户输入动态更新列表。尽管计算属性不支持异步操作，但通过巧妙地利用watcher，可以在延迟后正确地更新视图，确保了用户界面的响应性。

摘要由CSDN通过智能技术生成

watch:支持异步

计算属性不支持异步

  <script src="/lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text"  v-model="mytext">
        <button >搜索</button>
        <ul>
            <li v-for="item in datalist" :key="item">
                {{item}}
            </li>
        </ul>
    </div>



    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:"",
                datalist:['aaa','abb','bbc','cca','ddd','dac','abc','cbd' ],
                // 原数组
                originList:['aaa','abb','bbc','cca','ddd','dac','abc','cbd' ]
            },

            watch:{
                mytext(newval){
                    // 异步
                    setTimeout(()=>{
                        this.datalist = this.originList.filter(item=> item.includes(newval))
                    },2000)
                }

            }
           
        })
    </script>
    
</body>

小不言啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端进阶Vue框架-----watch（监听）

<script src="/lib/vue.js"></script></head><body> <div id="box"> <input type="text" v-model="mytext"> <button >搜索</button> <ul> <li v-for="item in datal...
复制链接

扫一扫