vue中的一些基础的方法,数组排序,模糊查询,获取时间

对象数组排序

// 对比数据
toSort(property) {
      return function(object1, object2) {
        var value1 = object1[property]
        var value2 = object2[property]
        console.log(value1, value2)
        if (value1 < value2) {
          return -1
        } else if (value1 > value2) {
          return 1
        } else {
          return 0
        }
      }
    },
调用方法
changeSortMode(value) {
      this.sortMode = this.sortMode === 1 ? 2 : 1
      if (this.sortMode === 1) {
      // 排序完再倒序
        this.data = this.data.sort(this.toSort(value)).reverse()
        this.projectName = this.projectName.sort(this.toSort(value)).reverse()
        console.log(this.data)
      } else {
      // 排序
        this.data = this.data.sort(this.toSort(value))
        this.projectName = this.projectName.sort(this.toSort(value))
        console.log(this.data)
      }
    },

对象数组模糊查询

indexof用来检索字符串,方法可返回某个指定的字符串值在字符串中首次出现的位置。如果为空为0,不存在为-1,查询为在该字符串的位置。需要判断查询的字符是否为空来判断。将查到的数据放到另一个数组里面
toSearch() {
      this.dialogSearch = true
      var len = this.data.length
      var len2 = this.projectName.length
      for (var i = 0; i < len; i++) {
        if (this.data[i].name.indexOf(this.searchProjectString) >= 0) {
          console.log(this.data[i].name.indexOf(this.searchProjectString))
          this.arr1.push(this.data[i])
        }
      }
    },
模糊查询的其他方法,返回一个数组
html代码
  <div>
			<input type="text" v-model="search" />
			<ul v-for="(item,index) in items">
				<li> {{item.msg}}</li>
			</ul>
	</div>
js代码
computed: {
			items: function() {
				var _search = this.search
				if (_search) {
					var reg = new RegExp(_search, 'ig')
					return this.list.filter(function(e) {
						return Object.keys(e).some(function(key) {
									return e[key].match(reg)
								})
							})
						}
						return this.list
					}
				}

	
也可以使用下面的方法,也可以实现模糊查询的效果
html代码:
           <div>
				<input type="text" v-model="search" />
				<ul v-for="(item,index) in toSearch(search)">
					<li> {{item.msg}}</li>
				</ul>
			</div>
			<div>
				<input type="text" v-model="search" />
				<button type="button" @click="theToSearch">搜索</button>
				<ul v-for="(item,index) in arr">
					<li> {{item.msg}}</li>
				</ul>
			</div>
js代码
methods: {
//通过filter
					toSearch(search) {
						return this.list.filter(item => {
							if (item.msg.includes(search)) {
								return item
							}
						})
					},
					// 这个方法需要先执行,才能显示数据,否则需要点击button才能查询数据
					theToSearch() {
						var len = this.list.length
						var arr = []
						for (var i = 0;i<len;i++) {
							if(this.list[i].msg.indexOf(this.search) >= 0 ) {
								arr.push(this.list[i])
							}
						}
						return this.arr = arr
					}
				},
				mounted() {
					this.theToSearch()
				}

获取当前时间,且封装成一个方法

methods:{
// 这个方法是将数据小于10的情况前面添加一个"0"
  addZero(val) {
      if (val < 10) {
        return '0' + val
      } else {
        return val
      }
    },
    getNowTime() {
      var data = new Date()
      var year = data.getFullYear()
      var month = this.addZero(data.getMonth() + 1)
      var date = this.addZero(data.getDate())
      var hour = this.addZero(data.getHours())
      var minute = this.addZero(data.getMinutes())
      // var second = data.getSeconds()
      //(将当前时间拼接成指定的形式)
      var nowTime = ''
      nowTime = year + '-' + month + '-' + date + ' ' + hour + ':' + minute
      console.log(nowTime)// 2020-04-08 18:51
      return nowTime
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值