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 按钮,触发了他的 ...
随机推荐
- python Tags 母板 组件 静态文件相关 自定义simpletag inclusion_tag
一.Tags(一)for 1.基本用法 <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% e ...
- ubuntu 修改系统时间无效
用root用户修改服务器时间无效:使用hwclock -w也不行 解决方法: 需要取消自动从互联网同步时间才可以的 timedatectl set-ntp 0 上面的命令可以关闭自动同步,然后你再设置 ...
- 一次 HTTP 请求响应过程的完整解析
因特网无疑是人类有史以来最伟大的设计,它互联了全球数亿台计算机.通讯设备,即便位于地球两端的用户也可在顷刻间完成通讯. 可以说『协议』是支撑这么一个庞大而复杂的系统有条不紊运作的核心,而所谓『协议』就 ...
- 什么是shell和终端？
目录 什么是shell? 什么是终端? 什么是shell? 当谈到命令时,我们实际上指的是shell.shell是一个接收由键盘输入的命令,并将其传递给操作系统来执行的程序.几乎所有的Linux发行版 ...
- [Swift]LeetCode38. 报数 | Count and Say
The count-and-say sequence is the sequence of integers with the first five terms as following: 1. 1 ...
- HBase篇--搭建HBase完全分布式集群
一.前述. 完全分布式基于hadoop集群和Zookeeper集群.所以在搭建之前保证hadoop集群和Zookeeper集群可用.可参考本人博客地址 https://www.cnblogs.com/ ...
- android 缩放平移自定义View 显示图片
1.背景 现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位~~~ 我相信看图的整个步骤,大家或者说用户 ...
- 来了，老弟!__二进制部署kubernetes1.11.7集群
Kubernetes容器集群管理 Kubernetes介绍 Kubernetes是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,Kubernetes也叫K8S.K8S是Go ...
- 关于Input内容改变的触发事件
1.onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <se ...
- qt程序启动播放动画
qt程序启动播放动画 编辑删除转载 2016-01-20 10:23:11 标签:qt启动动画 1.播放动画 QAxWidget *flash = , ); //QAxWidget使用的是Active ...