vue实际项目解决办法

解决vue变量未渲染前代码显示问题

将v-cloak最好写在根标签上：

<div v-cloak>  
    {{demo}}  
</div> 

绑定动态的样式

:style="{'stroke-dasharray': item.img}"

注：属性为 stroke-dasharray使用单引号区分，不然会报错

v-for多层循环

 <div v-for="(item,index) in items">
    <div v-for="(lists,typesIndex) in item.types">
         <div  v-for="(list,key) in lists.sites"></div>
     </div>
 </div>

自定义滚动事件

在mian.js中注册

Vue.directive('scroll', {
    inserted: function (el, binding) {
        let f = function (evt) {
            if (binding.value(evt, el)) {
                window.removeEventListener('scroll', f)
            }
        }
        window.addEventListener('scroll', f)
    }
});

在具有的html
<div v-scroll="handleScroll"></div>

实现上拉刷新组件

通过npm引入
1. 安装better-scroll
npm install better-scroll

2. 页面中引入better-scroll
import BScroll from 'better-scroll'

3. 如果不支持import，可使用
var BScroll = require('better-scroll')

参考链接：https://blog.csdn.net/qq_22557797/article/details/78866328

回到顶部

  methods: {
        handleScroll () {
          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          if(this.scrollTop>500){
            this.goTopShow=true //返回的图标
          }else{
            this.goTopShow=false
          }

        },
        goTop(){
          let timer=null,_that=this;
          cancelAnimationFrame(timer);
          timer=requestAnimationFrame(function fn(){
            if(_that.scrollTop>0){
              _that.scrollTop-=800;//每次返回的距离
              document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
              timer=requestAnimationFrame(fn)
            }else {
              cancelAnimationFrame(timer);
              _that.goTopShow=false;
            }
          })
        },


},

     mounted() {
        window.addEventListener('scroll', this.handleScroll)
      },
      destroyed(){
        window.removeEventListener('scroll', this.handleScroll)
      },

绑定鼠标滑过效果

 @mouseenter="Show"  @mouseleave="Show"

H5实现调系统邮箱

主要还是使用 a标签中的 mailto属性

 <a 
       :href=" 'mailto:'+to+'?cc='+cc+'&subject='+subject+'&body='+body"
    >
</a>


 data() {
        return {

          to:'邮箱地址',
          body:'发送的内容',
          subject:'',
          cc:'抄送'

        };
      },

根据属性判断class显示

 :class="feedbackSrc?'defultFacebook':'facebook'"

判断字符长度输出。。。

setString(str, len) {
  let strlen = 0;
  let s = "";
  try {
    for (let i = 0; i < str.length; i++) {
      if (str.charCodeAt(i) > 255) {
        strlen += 2;
      } else {
        strlen++;
      }
      s += str.charAt(i);
      if (strlen >= len) {
        return s+"...";
      }
    }
  } catch (error) {

  }

  return s;
}

json数组从大到小排序

  data.sort((a, b) => (
                            Number(b.data.age) - Number(a.data.age)
                        ))
//Number是根据data中的属性来做具体的转化的，向上取整也是可以的，但是data中的返回的值若为null，这个js是失效的

kmb转化

    BinaryProcess(str){
    // 0——999.994         0--999.99
        // 999.995——999994    1.00K--999.99K    K(千)
        // 999995——999994999  1.00M--999.99M    M(百万)
        // 999995000——无限大   1.00B--xB         B(十亿)
        str=Number(str)
        if(0<=str&&str<=999.994){
            // str = str
            str = str.toFixed(2)
        }else if(999.995<=str&&str<=999994) {
            str = (str/1000).toFixed(2)+'K'
        }else if(999995<=str&&str<=999994999){
            str = (str/1000000).toFixed(2)+'M'
        }else if(999995000<=str){
            // str = (str/1000000000)+'B'
            str = (str/1000000000).toFixed(2)+'B'
        }
        return str
    },

千位分隔符

 format_double(value){
   var num = parseFloat(value);
       num = num.toFixed(2)+"";
       var str = num.split(".")[0];
       var lis = num.split(".")[1];
       var siz = 0;
       var result = "";
       for (var i=str.length-1;i>=0;i--){
           siz++;
           if (siz%3==0){
               siz=0;
               result = ","+str.substr(i,3)+result;
           }
       }

       if (str.length%3 != 0){
           result = str.substr(0,str.length%3)+result;
       }else{
           result = result.substring(1,result.length);
       }
       return result+"."+lis;
   },

获取 URL参数

gethrefParam(varName) {
     var param = {};
        var url = window.location.href;
        if (url.indexOf("?") != -1) {
            url = url.split("?")[1];
            var keyvaluemap = url.split("&");
            for (var key in keyvaluemap) {
                var kvstr= keyvaluemap[key];
                var kv = kvstr.split("=");
                param[kv[0]] = kv[1];
            }
        }
        return param[varName];
}

vue中动态更换img的src是很难实现的因为base64的转化，建议更换背景图片的办法