二維陣列處理
二維陣列上使用 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')
})
}
}
{{ 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)
}
參考資料