vue使用datav数字翻牌器

html:

<div class="item bg-color-black"  v-for="item in titleItem" :key="item.title">
      <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
      <div>
         <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number"/>
      </div>
</div>

data中:

titleItem: [
        {
          title: '数据1(千万)',
          number: {
            number: [0],
            // toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 35
            }
          }
        },
        {
          title: '数据2(千万)',
          number: {
            number: [0],
            // toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 35
            }
          }
        },
        {
          title: '数据3(千万)',
          number: {
            number: [0],
            // toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 35,
              fill:'#F3BA40' //数字颜色
            }
          }
        }
    ]

mounted中:

 setInterval(() => {
    this.getChangenumber()
  }, 3000)

methods里:

getChangenumber() {
      let that=this
      this.$axios.post("******Num").then((res)=>{
        let item=res.data
        console.log(item)
        // let sum=item.comNum+item.posNum
        that.titleItem[0].number.number[0]=item.comNum
        that.titleItem[1].number.number[0]=item.posNum
        that.titleItem[2].number.number[0]=item.sum
        this.titleItem[0].number=  {...this.titleItem[0].number};//对象解构,更新props
        this.titleItem[1].number=  {...this.titleItem[1].number};//对象解构,更新props
        this.titleItem[2].number=  {...this.titleItem[2].number};//对象解构,更新props
        
      })
    }

你可能感兴趣的:(前端,vue,datav,element)