DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

前端vue几个实用小代码

  • 前端vue几个实用小代码

  • 已被浏览: 156 次2020年10月12日    来源:  https://blog.csdn.net/liulinnnnnnnnnn/article/details/108600882
  • 通过元素属性查出元素在list中的位置 可以省去循环list的优雅写法 this.index this.list.findIndex(d d.id this.id在JS中给list添加属性 这个可以用在点击过后切换样式之类的 this.$s

    前端VUE小技巧

      • 通过元素属性查出元素在list中的位置
      • 在JS中给list添加属性
      • 深复制list
      • 阻止页面原生事件
      • 获取鼠标位置
      • 在JS中拼接style
      • 转换时间格式
      • 取出map中的某一属性组成list并求和
      • 按照list中某一属性给list排序

    我觉得冷门却很好用的方法(我要我觉得,不要你觉得~)

    通过元素属性查出元素在list中的位置

    可以省去循环list的优雅写法

    this.index = this.list.findIndex(
    	d => d.id === this.id
    )
    

    在JS中给list添加属性

    这个可以用在点击过后切换样式之类的

    this.$set(list[index], 'url', 'www.baidu.com')
    

    深复制list

    这是个深坑,如果不用深复制,得到的新元素和旧元素是一个地址,修改一个全都变了。。。明明很简单的事我却摔了两次,希望萌新们注意这里

    this.dataListcopy = JSON.parse(JSON.stringify(this.dataList))
    

    阻止页面原生事件

    这个用在重写右键弹窗,点击事件之类的

    event.preventDefault()
    

    获取鼠标位置

    获取鼠标位置,跟上面的方法配套重写右键弹窗的,确定弹窗开启位置

    var x = event.clientX
    var y = event.clientY
    

    在JS中拼接style

    通过后台获取的数据来确定DIV的样式

    <view :style="getStyle()"></view>
    
    getStyle() {
    	return 'width:' + this.width + 'rem;height:' + this.height + 'rem;'
    }
    

    补充上面这个需求,在HTML中获取data中数据

    :style="[{ backgroundImage:'url(' + list[index] + ')' }]"
    

    转换时间格式

    getTime:function(){
        	var date = new Date(),
        	// 在这个位置如果new Date()参数为空是获取当前时间
        	// 也可以传个时间来转个格式
        	// 1、new Date("month dd,yyyy hh:mm:ss"); 
    		// 2、new Date("month dd,yyyy"); 
    		// 3、new Date(yyyy,mth,dd,hh,mm,ss); 注意:这种方式下,必须传递整型;
    		// 4、new Date(yyyy,mth,dd); 
    		// 5、new Date(ms); 注意:ms:是需要创建的时间和 GMT时间1970年1月1日之间相差的毫秒数;当前时间与GMT1970.1.1之间的毫秒数:var mills = new Date().getTime();
    		// date是标准时间格式:Fri Jun 02 2017 12:00:00 GMT+0800 (中国标准时间)    酱紫
    		
        	year = date.getFullYear(),
        	month = date.getMonth() + 1,
        	day = date.getDate(),
        	hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
        	minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
        	second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        	month >= 1 && month <= 9 ? (month = "0" + month) : "";
        	day >= 0 && day <= 9 ? (day = "0" + day) : "";
        	var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        	return timer
        }
    

    参考于NEW DATE()之参数传递

    取出map中的某一属性组成list并求和

    var arrValue = getArrayProperty(this.data)
    var sumValue = eval(arrValue.join('+'))
    var arrName = getArrayProperty(this.data, "name")
    
    getArrayProperty (array, key) {
    	var key = key || "value"
    	var res = []
    	if (array) {
    		array.forEach(function(t) {
    			res.push(t[key])
    		})
    	}
    	return res
     }
    

    按照list中某一属性给list排序

    let map2 = this.sort(this.data)
    
    sort(map) {
            // var map = [{name: "缸体",value: 15},{name: "刹车毂",value: 16},{name: "其他",value: 10}];
            var result = [];
            map["max"] = 999999999; // 存放每一次拍完序后的,该过程中产生的最大的元素。
            for(var i=0; i<map.length; i++) {
              var temp = -1;
              var k;
              for(k=0;k<map.length; k++) {
                // 和上次循环产生的最大值进行比较
                if(map[k].value >= map[ "max"]) {
                  continue;
                }
                if(temp < map[k].value) {
                  temp = map[k].value;
                  result[i] = map[k];
                }
              }
              console.log(k);
              map[ "max"] = temp;
            }
            console.log(result);
            return result
          },
    

    参考于js中map中元素排序
    未完待续。。。吧
    如果有什么不足或者错误的地方还望大佬们多多指点~


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:几个 代码 vue

  • 上一篇:如何在平板UI设计风格影响界面上的文字
  • 与“前端vue几个实用小代码”相关的资讯
  • Vue.js+ElementUI+vant生成动态表单配置
  • Tracy 小笔记 Vue
  • .Net Core——用代码写代码?
  • 老vue项目webpack3升级到webpack5全过程记录(一)
  • 前端必读:Vue响应式系统大PK(上)