二維陣列處理

  • 372
  • 0

二維陣列處理

二維陣列上使用 filter()

<div v-for="item in a">
  {{ item.label }}
  <div v-for="item in item.options">
    {{ item.data }} // {{ item.lightStatus }}
  </div>
</div>
data() {
  return {
    a: [
      {
        label: 'Polatis',
        options: [
          {
            label: 'Polatis_1',
            value: 'po1',
            text: '關於 Polatis_1 設備描述',
            lightStatus: 'as',
            data: 600
          }
        ]
      }
    ],
  }
},
methods: {
  hit() {
    this.filter = this.a.filter(function(item, index, array) {
      item.options[0].data < 200
        ? (item.options[0].lightStatus = 'danger')
        : (item.options[0].lightStatus = 'success')
    })
  }
}

Vue 中執行函數的三種方式

此為執行的函數
methods:{
 message(){
  console.log('立即執行..')
 }
},

按下按鈕執行
<button @click="message()">按鈕</button>
進入網頁立即執行函數
mounted(){
 this.message()
}
進入網頁後間隔幾秒執行
mounted() {
  setInterval(() => {
    this.message()
  }, 1000)
}

參考資料

  1. JavaScript Array 陣列操作方法大全 ( 含 ES6 )
  2. 顯示時間
  3. 好用修改 JSON 格式網站