vue實(shí)現(xiàn)單一篩選、刪除篩選條件
更新時(shí)間：2020年10月26日 13:24:31 作者：Serena_tz
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)單一篩選、刪除篩選條件的具體代碼，供大家參考，具體內(nèi)容如下
效果預(yù)覽：
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.v2.6.10.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: red
}
#product {
width: 700px;
margin: 20px auto;
background: #f2f2f2;
border: 1px solid #ddd;
}
ul {
padding: 10px;
}
#filter {
padding: 0 10px;
height: 40px;
line-height: 40px;
background-color: #ddd
}
#brand span {
display: inline-block;
margin-right: 30px;
}
#brand a {
margin: 0 5px;
}
#brand li {
margin-bottom: 10px;
}
mark {
border: 1px solid red;
padding-left: 5px;
margin-right: 15px;
}
mark em {
border-left: 1px solid red;
padding: 0 5px;
margin-left: 5px;
font-style: normal;
}
</style>
</head>
<body>
<div id="product">
<div id="filter">
<span>您篩選的手機(jī)：</span>
<mark v-for="item,index in obj">{{item}}<em @click="del(index,item)">X</em></mark>
</div>
<ul id="brand">
<li v-for="item,index in json">
<span>{{item.title}}</span>
<a href="#" rel="external nofollow" v-for="i in item.list" @click="add(index,i)">{{i}}</a>
</li>
</ul>
</div>
<script>
var json = [{
title: "品牌",
list: ["蘋果", "小米", "三星", "vivo", "OPPO", "華為"]
},
{
title: "內(nèi)存",
list: ["4GB", "8GB", "2GB", "3GB以下", "8GB以上"]
},
{
title: "存儲(chǔ)",
list: ["8GB", "16GB", "32GB", "64GB以下", "128GB以上"]
},
{
title: "尺寸",
list: ["4.5英寸", "5.5英寸以上", "4英寸以下"]
},
];
var vm=new Vue({
el: "#product",
data: {
json,
obj:{}
},
methods:{
add(index,i){
this.$set(this.obj,index,i);
},
del(index){
this.$delete(this.obj,index);
}
}
});
</script>
</body>
</html>
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2 中使用 render 函數(shù)編寫組件的方式
vue提供了聲明式編寫UI的方式,即vue提供了對(duì)DOM進(jìn)行描述的方式,有兩種描述DOM的方式即模板和render 函數(shù),本文通過(guò)示例代碼介紹vue2 中使用 render 函數(shù)編寫組件的方式,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了vue-cli 引入axios的方法,文中還給大家提到了vue-cli 配置axios的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue中watch和methods兩種屬性的作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue中前端與后端如何實(shí)現(xiàn)交互，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue二選一tab欄切換新做法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Bootstrap+Vue滑動(dòng)監(jiān)聽(tīng)Scrollspy實(shí)現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動(dòng)監(jiān)聽(tīng)Scrollspy實(shí)現(xiàn)餐廳餐品展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了vue 本地環(huán)境判斷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中commit和dispatch區(qū)別及用法辨析(最新)
在Vue中,commit和dispatch是兩個(gè)用于觸發(fā)Vuex store中的mutations和actions的方法,這篇文章主要介紹了Vue中commit和dispatch區(qū)別及其用法辨析,需要的朋友可以參考下2024-06-06
在Vue里渲染一塊內(nèi)容，會(huì)有四個(gè)流程步驟，那么該怎么理解這個(gè)流程呢，所以本文就給大家詳細(xì)講解一下Vue 渲染流程，文中有纖細(xì)的代碼示例供大家參考,需要的朋友可以參考下2023-07-07