按输入文本筛选 ul 列表 Vue.js 2
Filter ul list by input text Vue.js 2
当用户在输入字段中键入 name 或 initials 时,我想过滤一个 ul 列表。我正在使用 vue.js 2。正在呈现列表,调用一个存储变量,一个 JSON 文件。
存储变量
$store.coin.coin
JSON 例子
{
"coin": [
{
"initials": "DLR",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "dollar"
}, ...
]
}
HTML
<li>
<div class="input-group search-box">
<input id="filter-coins" v-model="search" placeholder="Filter" class="input-group-field" type="text">
</div>
</li>
<li class="tabs-title" v-for="item in filteredItems" :key="item.initials" >
<a href="#coinList" aria-selected="true">
<div class="grid-x">
<div class="auto cell">{{ item.initials }}</div>
<div class="auto cell">{{ item.price }}</div>
<div class="auto cell">{{ item.volume }}</div>
<div class="auto cell">{{ item.change }}</div>
<div class="auto cell">{{ item.name }}</div>
</div>
</a>
</li>
方法
export default {
name: 'coins',
search: '',
computed: {
filteredItems() {
return this.$store.coin.coin.filter(item =>
(item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1));
},
},
};
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import coin from '../data/coins-btc.json';
Vue.use(Vuex);
export default {
state: {
coin,
},
getters: {
coin: state => state.coin,
},
};
这是一个与 initials
或 name
一起使用的示例过滤器。
computed:{
filteredItems(){
let coins = this.$store.getters.coin.coin
// if there is no filter, return everything
if (!this.search) return coins
// setup the filter function
let searchValue = this.search.toLowerCase()
let filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
coin.name.toLowerCase().includes(searchValue)
return coins.filter(filter)
}
}
这是一个实际应用的例子。
console.clear()
const store = new Vuex.Store({
state: {
coin: {
"coin": [
{
"initials": "DLR",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "dollar"
},
{
"initials": "EUR",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "euro"
},
{
"initials": "AUS",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "australian"
}
]
}
},
getters:{
coin: state => state.coin
}
})
new Vue({
el: "#app",
store,
data:{
search: null
},
computed:{
filteredItems(){
let coins = this.$store.getters.coin.coin
// if there is no filter, return everything
if (!this.search) return coins
// setup the filter function
let searchValue = this.search.toLowerCase()
let filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
coin.name.toLowerCase().includes(searchValue)
return coins.filter(filter)
}
}
})
<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="app">
<ul>
<li>
<div class="input-group search-box">
<input id="filter-coins" v-model="search" placeholder="Filter" class="input-group-field" type="text">
</div>
</li>
<li class="tabs-title" v-for="item in filteredItems" :key="item.initials" >
<a href="#coinList" aria-selected="true">
<div class="grid-x">
<div class="auto cell">{{ item.initials }}</div>
<div class="auto cell">{{ item.price }}</div>
<div class="auto cell">{{ item.volume }}</div>
<div class="auto cell">{{ item.change }}</div>
<div class="auto cell">{{ item.name }}</div>
</div>
</a>
</li>
</ul>
</div>
当用户在输入字段中键入 name 或 initials 时,我想过滤一个 ul 列表。我正在使用 vue.js 2。正在呈现列表,调用一个存储变量,一个 JSON 文件。
存储变量
$store.coin.coin
JSON 例子
{
"coin": [
{
"initials": "DLR",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "dollar"
}, ...
]
}
HTML
<li>
<div class="input-group search-box">
<input id="filter-coins" v-model="search" placeholder="Filter" class="input-group-field" type="text">
</div>
</li>
<li class="tabs-title" v-for="item in filteredItems" :key="item.initials" >
<a href="#coinList" aria-selected="true">
<div class="grid-x">
<div class="auto cell">{{ item.initials }}</div>
<div class="auto cell">{{ item.price }}</div>
<div class="auto cell">{{ item.volume }}</div>
<div class="auto cell">{{ item.change }}</div>
<div class="auto cell">{{ item.name }}</div>
</div>
</a>
</li>
方法
export default {
name: 'coins',
search: '',
computed: {
filteredItems() {
return this.$store.coin.coin.filter(item =>
(item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1));
},
},
};
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import coin from '../data/coins-btc.json';
Vue.use(Vuex);
export default {
state: {
coin,
},
getters: {
coin: state => state.coin,
},
};
这是一个与 initials
或 name
一起使用的示例过滤器。
computed:{
filteredItems(){
let coins = this.$store.getters.coin.coin
// if there is no filter, return everything
if (!this.search) return coins
// setup the filter function
let searchValue = this.search.toLowerCase()
let filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
coin.name.toLowerCase().includes(searchValue)
return coins.filter(filter)
}
}
这是一个实际应用的例子。
console.clear()
const store = new Vuex.Store({
state: {
coin: {
"coin": [
{
"initials": "DLR",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "dollar"
},
{
"initials": "EUR",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "euro"
},
{
"initials": "AUS",
"price": "0.727282",
"volume": "1212",
"change": "+1.22",
"name": "australian"
}
]
}
},
getters:{
coin: state => state.coin
}
})
new Vue({
el: "#app",
store,
data:{
search: null
},
computed:{
filteredItems(){
let coins = this.$store.getters.coin.coin
// if there is no filter, return everything
if (!this.search) return coins
// setup the filter function
let searchValue = this.search.toLowerCase()
let filter = coin => coin.initials.toLowerCase().includes(searchValue) ||
coin.name.toLowerCase().includes(searchValue)
return coins.filter(filter)
}
}
})
<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="app">
<ul>
<li>
<div class="input-group search-box">
<input id="filter-coins" v-model="search" placeholder="Filter" class="input-group-field" type="text">
</div>
</li>
<li class="tabs-title" v-for="item in filteredItems" :key="item.initials" >
<a href="#coinList" aria-selected="true">
<div class="grid-x">
<div class="auto cell">{{ item.initials }}</div>
<div class="auto cell">{{ item.price }}</div>
<div class="auto cell">{{ item.volume }}</div>
<div class="auto cell">{{ item.change }}</div>
<div class="auto cell">{{ item.name }}</div>
</div>
</a>
</li>
</ul>
</div>