Vue实现购物车监听变化，以及模糊查询
【摘要】 Vue实现购物车监听变化，以及模糊查询 css<style> * { margin: 0; padding: 0; } header { display: flex; justify-content: space-between; } ...
Vue实现购物车监听变化，以及模糊查询
css
<style>
* {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
}
#app {
width: 80%;
background-color: #eee;
padding: 20px;
margin: 0 auto;
}
img {
width: 50px;
height: 50px;
}
</style>
html
<body>
<div id="app">
<h1>Vue实现购物车监听变化，以及模糊查询</h1>
<header>
<!-- 模糊查询 -->
<button type="button" class="btn btn-info">名称搜索</button>
<input type="text" class="form-control" placeholder="输入查询内容" v-model="input">
</header>
<table class="table table-bordered">
<tr>
<th>图片</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价(元)</th>
<th>商品金额(元)</th>
<th>操作</th>
</tr>
<tbody>
<!-- 当前对应的数据是复制粘贴，再把对应的数据渲染进来的时候，会先从缓存里
:key键 对应的值一定要是唯一的 如果不是唯一，脚手架会报错 -->
<tr v-for="(v,i) in searchData" :key="v.id">
<td><img :src='v.url' alt=""></td>
<td>{{v.name}}</td>
<td>
<button @click="v.count -= 1" :disabled="v.count==0">-</button>
{{v.count}}
<button @click="v.count += 1" :disabled="v.count==5">+</button>
</td> <!-- vue中文本格式化的特性 --- 过滤器-->
<td>{{v.price | priceFilters(2)}}</td> <!-- | priceFilters 过滤器写法 -->
<td>{{v.count*v.price | priceFilters(1)}}</td>
<td><button type="button" class="btn btn-warning">商品详情</button></td>
</tr>
</tbody>
<tr>
<td colspan="6">{{totalCount}} 件商品总计（不含运费）：{{totalPrice | priceFilters(2)}}</td>
</tr>
</table>
</div>
</body>
js
new Vue({
el: "#app",
data: {
input: "",/* 输入框的值 */
lists: [
{ id: 1, name: "苹果", price: 10, count: 2, url: "./苹果.jpg" },
{ id: 2, name: "梨", price: 20, count: 1, url: "./梨.jpg" },
{ id: 3, name: "芒果", price: 15, count: 1, url: "./芒果.jpg" },
{ id: 4, name: "葡萄", price: 25, count: 2, url: "./葡萄.jpg" },
{ id: 5, name: "车厘子", price: 120, count: 1, url: "./车厘子.jpg" }
]
},
methods: {
},
filters: { //过滤器 管道 用于文本格式化 比如:时间戳 10--->￥10 可传参
priceFilters: function (data, n) { //可以直接获取到传过来的参数
return '￥' + data.toFixed(n) /* toFixed(2)保留两位小数 */
}
},
computed: { //计算属性 和在data一样，但是名字不能相同 用的时候直接 {{totalCount}}
//总的数量
totalCount: function () {
var n = 0;
this.searchData.forEach(function (item, index) {
n += item.count;
});
return n;
},
//总的金额
totalPrice: function () {
var n = 0;
this.searchData.forEach(function (item, index) {
n += item.count * item.price;
});
return n;
},
searchData: function () { //模糊匹配
if (!this.input) { //如果还没有输入，返回this.lists
return this.lists
}
/*拿到数据展示不出来*/ // filters vue中的过滤器
/* return this.lists.filter(function (item, index) { //filter过滤的方法，是一个方法 . 像Js的一个方法
return item.name.includes(this.input) //includes 判断一个数组是否包含一个指定的值。
}) */
//在回调函数，定时器里 this的指向会发生变化 指向window
// 解决办法1 变为箭头函数
return this.lists.filter(item => { //filter过滤的方法，是一个方法 . 像Js的一个方法
return item.name.includes(this.input) //includes 判断一个数组是否包含一个指定的值。
})
}
}
})
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）