vue element-ui 利用computed 对数据进行过滤

list  == 列表数据, searchContact == 查找输入

//模板区域
<el-table :data="tables" >


// js区域
computed: {
    tables() {
      let search = this.searchContact;
      if (search) {
        return this.list.filter(function(data) {
          return Object.keys(data).some(function(key) {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(search) !== -1
            );
          });
        });
      }
      return this.list;
    }
 }

 

好的,以下是一个使用 VueElement-UI 实现的亚运会倒计时: 1. 首先,需要安装 VueElement-UI: ```bash npm install vue npm install element-ui ``` 2. 在 Vue 组件引入 Element-UI 的倒计时组件和样式: ```vue <template> <div class="countdown"> <el-countdown :time="countdown" :auto-start="false" @finish="handleFinish"> <span slot="days">{{ days }} 天</span> <span slot="hours">{{ hours }} 时</span> <span slot="minutes">{{ minutes }} 分</span> <span slot="seconds">{{ seconds }} 秒</span> </el-countdown> </div> </template> <script> import { ElCountdown } from 'element-ui' export default { components: { ElCountdown }, data() { return { countdown: 0 } }, computed: { days() { return Math.floor(this.countdown / (24 * 60 * 60 * 1000)) }, hours() { return Math.floor((this.countdown % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)) }, minutes() { return Math.floor((this.countdown % (60 * 60 * 1000)) / (60 * 1000)) }, seconds() { return Math.floor((this.countdown % (60 * 1000)) / 1000) } }, methods: { startCountdown() { const endDate = new Date('2022-09-10T00:00:00.000Z') const now = new Date() this.countdown = endDate - now }, handleFinish() { console.log('倒计时结束') } }, mounted() { this.startCountdown() } } </script> <style> .countdown { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 24px; } </style> ``` 3. 在组件定义一个倒计时的结束时间(即亚运会的开幕时间),并使用计算属性将倒计时的毫秒数转换为天、小时、分钟和秒。 4. 在组件的 mounted 钩子函数调用 startCountdown 方法,该方法会计算倒计时的毫秒数并将其赋给 countdown 变量。 5. 最后,将倒计时组件添加到模板,并设置好样式即可。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值