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 按钮,触发了他的 ...
随机推荐
- Oracle expdp数据泵导出，并在文件上附加上日期格式
一.导出操作的计算机要安装Oracle Client(建议管理员版本) 二.在服务端创建目录 create directory dpdir as '目录'; 三.给目录赋权限 grant read,w ...
- [Swift]LeetCode623. 在二叉树中增加一行 | Add One Row to Tree
Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with value ...
- [Swift]LeetCode735. 行星碰撞 | Asteroid Collision
We are given an array asteroids of integers representing asteroids in a row. For each asteroid, the ...
- [Swift]LeetCode789. 逃脱阻碍者 | Escape The Ghosts
You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is (ta ...
- mac连接windows远程桌面及文件复制
最近更换mac办公,但由于之前是用windows,所以很多文件项目之类的东西都还在windows电脑中,一次都传到mac上又会比较占内存,并且使用率也不高,感觉不划算.但每次想用的时候,在从windo ...
- 『Island 基环树直径』
Island(IOI 2008) Description 你准备浏览一个公园,该公园由 N 个岛屿组成,当地管理部门从每个岛屿 i 出发向另外一个岛屿建了一座长度为 L_i 的桥,不过桥是可以双向行走 ...
- [转]基于.NET平台常用的框架整理
自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...
- 使用ML.NET实现白葡萄酒品质预测
导读:ML.NET系列文章 本文将基于ML.NET v0.2预览版,介绍机器学习中的分类和回归两个重要概念,并实现白葡萄酒品质预测. 本系列前面的文章也提到了一些,经典的机器学习最主要的特点就是模拟, ...
- 带着新人学springboot的应用04（springboot+mybatis+redis 完）
对于缓存也说了比较多了,大家对下图这一堆配置类现在应该有些很粗略的认识了(因为我也就很粗略的认识了一下,哈哈!),咳,那么我们怎么切换这个缓存呢?(就是不用springboot提供的默认的Simple ...
- 一篇文章带你学会Linux三剑客之一:awk
awk是一种用于处理文本.模式匹配的编程语言.与sed和grep,俗称Linux下的三剑客.学会 awk 等于你在 Linux 命令行里,又多了一种处理文本的选择.这篇文章重点教你如何使用,看完这篇文 ...