v-for指令是Vue.js提供的用于循環數組的指令,它可以通過遍歷數組的每一個元素,將數組中的元素在DOM中動態生成。當我們需要對數組中的元素進行篩選并顯示時,需要使用數組判斷包含的方法。
Array.includes(searchElement[, fromIndex])
其中,searchElement
為必填參數,代表需要查找的元素;fromIndex
為可選參數,代表查找的起始位置,默認值為0。includes()方法返回一個布爾值,如果在數組中查找到searchElement
則返回true
,否則返回false
。
下面是一個用Vue.js編寫的示例:
<div id="app">
<ul>
<li v-for="item in items" v-if="item.title.includes('Vue')" :key="item.id">{{ item.title }}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
items: [
{ id: 1, title: "Vue.js入門" },
{ id: 2, title: "Vue.js進階" },
{ id: 3, title: "React入門" },
{ id: 4, title: "Angular入門" },
{ id: 5, title: "Webpack入門" }
]
}
});
</script>
在上面的示例中,我們使用了v-for
指令遍歷items
數組,使用v-if
指令篩選符合條件的元素。在v-if
指令中,我們使用了Array.includes()
方法判斷每個元素的title
屬性是否包含字符串"Vue",如果包含,則顯示該元素。
除了Array.includes()
方法外,還有其他可以用來判斷數組是否包含某個元素的方法:
Array.indexOf(searchElement[, fromIndex])
Array.lastIndexOf(searchElement[, fromIndex])
其中,Array.indexOf()
方法從數組的起始位置開始查找元素,如果在數組中找到該元素,則返回該元素在數組中的第一個索引,否則返回-1。而Array.lastIndexOf()
方法從數組的末尾位置開始查找元素,如果在數組中找到該元素,則返回該元素在數組中的最后一個索引,否則返回-1。
這里提醒一下,由于Array.includes()
、Array.indexOf()
和Array.lastIndexOf()
方法屬于ES6標準,在低版本的瀏覽器中可能不支持這些方法,需要使用Polyfill進行兼容性處理。