利用计算属性改写todolist示例程序

最新推荐文章于 2021-06-03 19:19:27 发布

gunsmoke

最新推荐文章于 2021-06-03 19:19:27 发布

阅读量120

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/gunsmoke/article/details/106164820

版权

vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="main">
    <input type="text" v-model="searchData">
    <ul>
        <li v-for="data in getList">{{data}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#main',
        data: {
            dataList:['aaa','bbbb','cccc','dddd','abaa','cbcc','abc'],
            searchData:''
        },
        methods: {
        },
        computed: {
            getList() {
                let reg = new RegExp(this.searchData);
                return this.dataList.filter((value) => reg.test(value))
            }
        }
    })
</script>

</body>
</html>

这个简洁多了

gunsmoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用计算属性改写todolist示例程序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body><div id="main"> <input type="text" v-mod
复制链接

扫一扫

专栏目录