Vue一些基本操作技巧

1.Vue删除data列表中的项

下为异步删除购物车，并清空当前条目

 1  cartDel: function (item) {
 2                 let _this = this;
 3                 _this.confirm("确认删除吗？", function () {
 4                         _this.axios.post(cartDel, qs.stringify({
 5                             'cart_id': item.cart_id
 6                         })).then(function (res) {
 7 //                            console.log(res)
 8                             if (res.data.code == 200 && res.data.datas == 1) {
 9 //                                console.log(_this.cart_list.indexOf(item))
10                                 var index = _this.cart_list.indexOf(item)
11                                 _this.cart_list.splice(index, 1)
12 
13 
14                             }
15                         })
16                     },
17                     function () {
18                         _this.toast("取消成功")
19 
20                     }
21                 )
22 
23             },

axios.post中的cartDel为请求的的接口地址

2.vue在模版中拼接item的值

                    <li v-for="item in goods_commend_list">
                        <a :href="['product_detail.html?goods_id='+item.goods_id]">
                            <img :src="item.goods_image_url" width="100%">
                        </a>
                        <p>
                            <a href="#">{{item.goods_name}}</a>
                        </p>
                        <b><i>￥</i>{{item.goods_price}}</b><a></a>
                        <div class="clearh">
                        </div>
                    </li>

3.循环嵌套并用第一个

                    <div v-for="(item,index) in goods_info.spec_name">
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">{{item}} </a> <br>
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default"
                           v-for="(item,index2) in goods_info.spec_value[index]" :spec-value="index2">{{item}}</a>
                    </div>

4.使用第三方组件的步骤

0、npm install  第三方  
1 、import {Swipe, SwipeItem} from 'vue-swipe'   
2、Vue.component('swipe', Swipe);Vue.component('swipe-item', SwipeItem);
3、    <div id="container">
        <swipe class="my-swipe">
            <swipe-item class="slide1">Slide1</swipe-item>
            <swipe-item class="slide2">Slide2</swipe-item>
            <swipe-item class="slide3">Slide3</swipe-item>
        </swipe>

        <br>

        <swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false">
            <swipe-item class="slide1">SINGLE SLIDE</swipe-item>
        </swipe>

        <br>

        <swipe class="my-swipe" :speed="900" :auto="0" :show-indicators="false" :no-drag="true">
            <swipe-item class="slide1">SINGLE SLIDE</swipe-item>
        </swipe>
    </div>

    还有一种
    0、npm install  第三方  

直接在需要使用的模块下使用
  import {Swipe, SwipeItem} from 'vue-swipe'
    export default{
        components: {
            'swipe': Swipe,
            'swipe-item': SwipeItem

        },

  import {Swipe, SwipeItem} from 'vue-swipe'
  Vue.use(Swi);

4.Vue中v-for和v-if切换不同的样式Class

 1 <div class="weui-panel weui-panel_access">
 2     <div class="weui-panel__hd">规格
 3         <div class="weui-panel__bd">
 4             <div v-for="(item,index) in goods_info.spec_name">
 5                 <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">{{item}} </a> <br>
 6                 <a href="javascript:;" class="weui-btn weui-btn_mini  weui-btn_default"
 7                    v-for="(item,index2) in goods_info.spec_value[index]" :spec-value="index2"
 8                    :class="{'weui-btn_plain-primary': spec_id.indexOf(index2)>=0}" :href="goSpecLink(index2)" 
 9                 >{{item}}
10                 </a>
11             </div>
12         </div>
13     </div>
14 </div>

5.vue 数组交集差集，深度复制的方法

            arrayMis: function (a, b) {
                let arrA = []
                let arrB = [];
                a.forEach(function (val) {
                    if (b.indexOf(val) >= 0) {
                        arrA.push(val)
                    } else {
                        arrB.push(val)
                    }

                });
                return [arrA, arrB]
            },
            copyArr : function (arr){
                return arr.map((e)=>{
                    if(typeof e === 'object'){
                        return Object.assign({},e)
                    }else{
                        return e
                    }
                })
            },