满口金牙 2022-12-11 13:06 采纳率: 91.1%
浏览 23
已结题

Vue 对象数组的 临时属性的问题

在一个表格中,对某列数据,进行筛选 显示,
我现在的方法给 每行的数据 增加一个 临时属性
通过更改 show:boolean 这个值达到不显示的目的

[
  {name:'小明',show:true}
  {name:'小王',show:false}
]

这里有个问题,每次拿到数据, 都要遍历增加 show 属性
保存又要 遍历 删除这个属性

所以感觉不是很完美
有没有更好的方法

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-12-11 14:37
    关注

    用计算属性,过滤数据源,显示的时候遍历计算属性

    <div id="app">
        关键字:<input type="text" v-model="keyword" />
        <div v-for="item in result">{{ item.name }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                keyword:'',
                list:[
                        { name: '小明' },
                        { name: '小王' }
                    ]
            },
            computed: {
                result() {
                    if (this.keyword)
                        return this.list.filter(i => i.name.includes(this.keyword));
                    return this.list
                }
            }
        });
    </script>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月19日
  • 已采纳回答 12月11日
  • 创建了问题 12月11日

悬赏问题

  • ¥60 请查询全国几个煤炭大省近十年的煤炭铁路及公路的货物周转量
  • ¥15 请帮我看看我这道c语言题到底漏了哪种情况吧!
  • ¥66 如何制作支付宝扫码跳转到发红包界面
  • ¥15 pnpm 下载element-plus
  • ¥15 解决编写PyDracula时遇到的问题
  • ¥15 有没有人能解决下这个问题吗,本人不会编程
  • ¥15 plotBAPC画图出错
  • ¥30 关于#opencv#的问题:使用大疆无人机拍摄水稻田间图像,拼接成tif图片,用什么方法可以识别并框选出水稻作物行
  • ¥15 Python卡尔曼滤波融合
  • ¥20 iOS绕地区网络检测