138-查询案例-涉及知识点:forEach遍历&computed计算属性&v-for循环
效果如下:
项目目录:
Home.vue代码如下:
<template>
<div class="home">
<HelloWorld/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/Comp1.vue'
export default {
name: 'Home',
components: {
HelloWorld
},
created(){
console.log(this.$route.meta.isKeep);
},
// 两个特殊的生命周期函数: 因为被keep-alive包着,才有这两个函数
activated(){
console.log("组件被激活的时候执行,被切换回来的时候,被展示在页面上的时候");
},
deactivated(){
console.log("组件被取消激活的时候执行,被切换出去的时候,消失在页面上的时候");
}
}
</script>
关键组件Comp1.vue代码如下:
<template>
<!-- 作业讲解-点击查询案例 -->
<div>
<div class="top">
<span>名称</span>
<input type="text" v-model.trim="txtVal" @keyup="hdKeyup">
<!-- .trim作用是:前后去空格 -->
<button @click="search">查询</button>
</div>
<table>
<tr>
<th v-for="item in titles" :key="item">{{item}}</th>
</tr>
<tr v-for="item,index in info" :key="item.id" v-show="item.is_show">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.price_info.toFixed(2)}}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
<tr>
<td colspan=5>总价为:{{total}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
txtVal:"",
titles:["ID","主标题","起步价格","操作"],
info:[{
"id": 287,
"title": "严选新式样板间",
"price_info": 29.9,
"is_show": true
}, {
"id": 286,
"title": "无“油”无虑的甜蜜酥脆",
"price_info": 45,
"is_show": true
}, {
"id": 283,
"title": "孩子成长中少不了的一双鞋",
"price_info": 78,
"is_show": true
}, {
"id": 282,
"title": "成就一室笋香1",
"price_info": 121,
"is_show": true
}, {
"id": 281,
"title": "条纹新风尚",
"price_info": 29,
"is_show": true
}, {
"id": 277,
"title": "治愈生活的满怀柔软",
"price_info": 66.78,
"is_show": true
}, {
"id": 274,
"title": "没有软木拖,怎么过夏天",
"price_info": 50.99,
"is_show": true
}, {
"id": 272,
"title": "料理也要精细简单",
"price_info": 69,
"is_show": true
}, {
"id": 271,
"title": "选式新懒人",
"price_info": 15.3,
"is_show": true
}, {
"id": 268,
"title": "米饭好吃的秘诀:会呼吸的锅",
"price_info": 20.1,
"is_show": true
}]
}
},
methods:{
hdKeyup(){
// 如果用户输入的值为空, 就把所有的数据展示出来(每一项的is_show设置为true)
if(!this.txtVal){
this.info.forEach(item=>{
item.is_show=true
})
}
},
search(){
if(!this.txtVal){
alert("请输入要查询的内容!");
return
}
// 查询的逻辑: 利用v-show的显示和隐藏.把title中包含用户输入的内容的这一项的is_show设置为true,否则设置为false
// 因为每一项的is_show都要重新设置,所以遍历info数组
this.info.forEach(item=>{
// 看看如果这一项item的title包含用户输入的信息this.txtVal, 如果包含item.is_show=true
// if(item.title.includes(this.txtVal)){
// item.is_show=true
// }else{
// item.is_show=false
// }
item.is_show=item.title.includes(this.txtVal)
})
},
del(i){
this.info.splice(i,1)
}
},
computed:{
total(){
let ret = this.info.reduce((pre,cur)=>{
// 判断这一项的is_show,如果为真就把价格加进去,否则就不加进去(直接返回pre)
if(cur.is_show){
return pre+cur.price_info
}else{
return pre
}
// return cur.is_show?(pre+cur.price_info):pre
},0)
return "¥"+ret.toFixed(2)+"元"
}
}
}
</script>
<style lang = "less" scoped>
*{margin: 0;padding: 0;}
body{font-size: 14px; color:#666; padding-left: 50px;padding-top: 30px;}
input,button{outline-style: none;}
table{border: 1px solid #ddd;border-collapse: collapse; }
td,th{border: 1px solid #ddd; width: 130px; height: 30px;text-align: left; padding: 10px;}
.top{
display: flex;
margin-bottom: 10px;
}
.top>*{
margin-right: 20px;
}
.top span{
line-height: 40px;
}
.top input{
border:1px solid #ccc;
border-radius:4px;
padding-left: 8px;
color:#666;
}
button{
border:0;
padding:10px 15px; background-color: skyblue;
color:#fff;
border-radius:4px;
}
</style>