Vue一些基本操作技巧

1.Vue删除data列表中的项

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

 cartDel: function (item) {
                let _this = this;
                _this.confirm("确认删除吗？", function () {
                        _this.axios.post(cartDel, qs.stringify({
                            'cart_id': item.cart_id
                        })).then(function (res) {
//                            console.log(res)
                            if (res.data.code == 200 && res.data.datas == 1) {
//                                console.log(_this.cart_list.indexOf(item))
                                var index = _this.cart_list.indexOf(item)
                                _this.cart_list.splice(index, 1)


                            }
                        })
                    },
                    function () {
                        _this.toast("取消成功")

                    }
                )

            },

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

<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd">规格
        <div class="weui-panel__bd">
            <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"
                   :class="{'weui-btn_plain-primary': spec_id.indexOf(index2)>=0}" :href="goSpecLink(index2)" 
                >{{item}}
                </a>
            </div>
        </div>
    </div>
</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
                    }
                })
            },

其他有用的文章： 

laravel5.3多字段登录方法重写

处理laravel在宝塔中404错误的正确配置

TCP/Ip协议的一些图片

Css书写规范