Vue (5) — 列表过滤(分别用watch和computed实现)、列表排序

最新推荐文章于 2024-05-16 03:29:17 发布

吃不到棒棒糖的小熊

最新推荐文章于 2024-05-16 03:29:17 发布

阅读量1.7k

点赞数 5

分类专栏： Vue 文章标签： node.js 前端后端

本文链接：https://blog.csdn.net/m0_59897687/article/details/121643338

版权

一、列表过滤

实现功能：在输入框内输入关键词，过滤列表中与关键词相关的列。可以用watch或computed来实现。

列表样式：

1.用watch实现

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入姓名" v-model="keyWord">
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {
  {p.name}}-{
  {p.age}}-{
  {p.sex}}
            </li>
        </ul>
    </div>
</body>
<script>
    Vue.config.productionTip = false//阻止Vue在启动时生成生产提示
   new Vue({
        el:"#root",
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:"马冬梅",age:18,sex:"女"},
                {id:'002',name:"周冬雨",age:19,sex:"女"},
                {id:'003',name:"周杰伦",age:20,sex:"男"},
                {id:'004&

最低0.47元/天解锁文章

吃不到棒棒糖的小熊

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue (5) — 列表过滤(分别用watch和computed实现)、列表排序

目录一、列表过滤 1.用watch实现 2.用computed实现二、列表排序一、列表过滤实现功能：在输入框内输入关键词，过滤列表中与关键词相关的列。可以用watch或computed来实现。列表样式： 1.用watch实现<body> <div id="root"> <h2>人员列表</h2> <input type="text...
复制链接

扫一扫

专栏目录