vue点击按钮给商品按照价格进行倒叙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>按照商品价格倒叙</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="sortBtn()">点击倒叙</button>
<ul>
<li v-for="(list, index) in goodList" :key="index">{{list.name}} ------------ {{list.gdPrice}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
goodList: [
{
name: '测试商品1',
gdPrice: 600
},
{
name: '测试商品2',
gdPrice: 700
},
{
name: '测试商品3',
gdPrice: 800
}
]
}
},
methods: {
sortBtn () {
console.log('sort')
this.goodList.sort(this.sortMethods('gdPrice'))
},
sortMethods (property) {
return function(a,b){
var value1 = a[property]
var value2 = b[property]
return value2 - value1
}
}
},
})
</script>
</body>
</html>
vue点击按钮给商品按照价格进行倒叙的更多相关文章
- vue 点击按钮弹窗，点击关闭按钮关闭弹窗。
<div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...
- vue中点击按钮自动截图并下载图片
点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载 html2canvas npm install html2canvas --save 引用 : import htm ...
- Vue点击按钮下载对应图片
最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...
- vue 点击按钮 input框架获取焦点的方法
在按钮事件里加上这一段this.$nextTick(() =>{ this.$refs.input.focus()})
- vue中点击按钮复制内容
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
- vue点击按钮复制文本框内容
1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...
- Vue nodejs商城项目-商品列表价格过滤和加入购物车功能
一.价格过滤功能 GoodsList.vue >>点击价格区间时发送请求 methods:{ getGoodsList(flag){ var param = { ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- 解决关于 vue项目中 点击按钮路由多了个问号
问题描述: 在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的 ...
随机推荐
- .NET Standard 2.0正式发布了
亦可赛艇 前天(2017年8月14日),.NET Standard 2.0正式版终于发布了,与之相配套的.NET Core 2.0也同时正式发布,真是令人振奋. 详情请看:https://blogs. ...
- Servlet, Struts2和SpringMVC 并发访问线程安全问题
第一部分: Servlet不是线程安全的. 要解释Servlet为什么不是线程安全的,需要了解Servlet容器(即Tomcat)使如何响应HTTP请求的. 当Tomcat接收到Client的HTTP ...
- 平衡二叉树(AVL)介绍及其实现
一.平衡二叉树 任何一个数据的查找过程都需要从根结点出发,沿某一个路径朝叶子结点前进.因此查找中数据比较次数与树的形态密切相关. 对于二叉树来说,当树中每个结点左右子树高度大致相同时,树高为logN. ...
- http请求抓包神器-Fiddler（记录和检查你电脑的所有http通讯）
Fiddler是做什么的,能帮助我们做什么? 1.能够监听http/httpS的流量,可以截获从浏览器或者客户端软件向服务器发送的http/https请求: 2.对截获之后的请求,我们还能够查看请求中 ...
- [Swift]LeetCode274.H指数 | H-Index
Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...
- [Swift]LeetCode639. 解码方法 2 | Decode Ways II
A message containing letters from A-Z is being encoded to numbers using the following mapping way: ' ...
- [Swift]LeetCode658. 找到 K 个最接近的元素 | Find K Closest Elements
Given a sorted array, two integers k and x, find the kclosest elements to x in the array. The result ...
- dpkg: 处理软件包 xxx (--configure)时出错 解决办法
第一步:备份 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 第二步:新建 $ sudo mkdir /var/lib/dpkg/info 第三步 ...
- 【原创】一文掌握 Linux 性能分析之 I/O 篇
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 一文掌握 Li ...
- Shell获取时间，日期，上月，当月，下月
#当前日期 $ date +%F #当前时间$ date +"%F %H:%M:%S" #昨日$ date -d yesterday +%F #上一个月 $ date -d &qu ...