<!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点击按钮给商品按照价格进行倒叙的更多相关文章

  1. vue 点击按钮弹窗,点击关闭按钮关闭弹窗。

    <div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...

  2. vue中点击按钮自动截图并下载图片

    点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载 下载    html2canvas    npm install html2canvas  --save 引用 : import htm ...

  3. Vue点击按钮下载对应图片

    最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...

  4. vue 点击按钮 input框架获取焦点的方法

    在按钮事件里加上这一段this.$nextTick(() =>{ this.$refs.input.focus()})

  5. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  6. vue点击按钮复制文本框内容

    1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...

  7. Vue nodejs商城项目-商品列表价格过滤和加入购物车功能

    一.价格过滤功能 GoodsList.vue >>点击价格区间时发送请求 methods:{     getGoodsList(flag){         var param = {   ...

  8. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  9. 解决关于 vue项目中 点击按钮路由多了个问号

    问题描述: 在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的 ...

随机推荐

  1. new Date()设置日期在IOS的兼容问题

    一般这样创建一个日期变量 var d = new Date("2017-08-11 12:00:00"); 发现在iOS中不兼容,返回valid Date. IOS中不支持 - 连 ...

  2. [Swift]LeetCode6. Z字形变换 | ZigZag Conversion

    The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows like ...

  3. ubuntu中环境变量的几个问题思考

    问题一:export PATH=$PATH:/usr/local和export PATH=/usr/local:$PATH这两个的区别是什么?可以随便用吗? 这两个都是要把该目录加到环境变量中,一般的 ...

  4. SSM框架报HTTP Status 500 - Request processing failed; nested exception is java.lang.NullPointerException错

    如下图 一番排查之后发现原来是server层写漏注释了 粗心大意,一天内出现两次写漏注释,SSM框架有意思.

  5. 【git】idea /git bash命令 操作分支

    1.需求 因为目前要对项目做一些改动,而项目又即将上线,这些新的改动又不需要一起上线,所以这个时候需要在原有的master分支上重新拉出一个分支进行开发. 2.分支操作 打开git bash工具→切换 ...

  6. NDK开发入门终极教程

    0 前言 同NDK技术的渊源始于3年前,使用so文件的时候了解到NDK技术,并且C语言一直是强项,就鼓捣起NDK开发.在AndroidStduio还没推广的年代,基于eclipse搭建NDK开发环境需 ...

  7. ELK-安装logstash

    注意:在下载tar包的时候需要注意下安装的es版本号,按照官网的说明版本是对应一致的. $ wget https://artifacts.elastic.co/downloads/logstash/l ...

  8. RabbitMQ消息队列(七)-通过fanout模式将消息推送到多个Queue中(.Net Core版)

    前面第六章我们使用的是direct直连模式来进行消息投递和分发.本章将介绍如何使用fanout模式将消息推送到多个队列. 有时我们会遇到这样的情况,多个功能模块都希望得到完整的消息数据.例如一个log ...

  9. windows下安装bpython方法 (新)

    刚开始学习python的时候使用的ipython解释器,挺好用的,后来发现bpython功能更强大,linux系统中安装基本没啥问题,不过在windows下安装倒是不容易啊.使用google搜了一下, ...

  10. angr进阶(5)内存操作

    angr也可以将符号写在内存里,控制内存中的值,结合任意位置开始有奇效,但就是慢sym-write p = angr.Project('./issue', load_options={"au ...