当前位置： 移动技术网 > IT编程>网页制作>CSS > es6技巧写法（持续更新中~~~）

es6技巧写法（持续更新中~~~）

2019年01月02日  | 移动技术网IT编程  | 我要评论

为class绑定多个值

普通写法 
:class="{a: true, b: true}"
其他 
:class="['btn', 'btn2', {a: true, b: false}]"

一个值判断a或者判断b

普通写法 
if(flg === a || flg === b)
其他 
['a','b'].indexof(flg) > -1

引用一个

普通写法 
import a from './a.vue'
componets: {
    a
}
node写法 
components: {
    a: require('./a.vue')
}

v-for渲染

一般 


    

  • {{item.uuid}} //输出uuid字段
    • 

  • 解构赋值

    

      

    • {{uuid}} //直接解构赋值输出
      • 

    

    css私有化
    
一般

    
设置比较长的class类名区分，或者使用ben等命名方法
    
css module

    .h3 {}
    

    style样式会存在$style计算属性中
    

    //调用方式

    

     
    
//$style是计算属性，所以也可以这样 bool为bool表达式

     
    

    
缺点： 生成一个独一无二的class类名，只能使用类名class控制样式
    
scoped

    

    
生成hash属性标识.且根元素受父组件的scoped影响
    

    解决办法
    

    
使用>>>深度选择器
    

    //寻找p下的样式，包括子组件样式
p >>> .h3 { }
    

    对象操作
    

    
对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用object.assign方法。
    

    // bad
const a = {};
a.x = 3;

// if reshape unavoidable
const a = {};
object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;
    

    
如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。
    

    // bad
const obj = {
  id: 5,
  name: 'san francisco',
};
obj[getkey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'san francisco',
  [getkey('enabled')]: true,  //属性表达式 6
};
    

    数组、对象参数使用扩展运算符(spread)
    

    连接多个数组
    
一般

    let arr1 = [1,2,3]
let arr2 = [4,6,7]
arr2 =  arr2.concat(arr1)
    
spread 运算符

    let arr1 = [1,2,3]
let arr2 = [...arr1,4,6,7]
    

    连接多个json对象
    
一般

    var a = { key1: 1, key2: 2 }
var b = object.assign({}, a, { key3: 3 })
// 最后结果
{key1: 1, key2: 2,key3: 3 }
    
spread 运算符

    var a = { key1: 1, key2: 2 }
var b = {...a, key3: 3}
    

    es6剩余参数（rest paramete）
    

    
使用reset paramete是纯粹的array实例
    
一般

    function a() {
    console.log(arguments)
}
a(1,2,3)
    
es6

    function a(...args) {
    console.log(args)
}
a(1,2,3)
    

    判断数组是否包含指定值
    

    
ie 任何系列都不支持
    
一般

    需要自己写工具函数
    
es6

    var arr = [1,2,3]
console.log(arr.includes(1)); // true
console.log(arr.includes(4)); // false
    

    顺序遍历对象key值
    

    
ie 任何系列都不支持
    
es6

    var obj = { key1: 1, key2: 2, key3: 3 }
object.keys(obj); // ["key1", "key2", "key3"]
    

    顺序遍历对象value值
    

    
ie 任何系列都不支持
    
es6

    var obj = { key1: 1, key2: 2, key3: 3 }
object.values(obj); // [1,2,3]
    

    • 




                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                 
                 

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网