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'   
二、Vue.component('swipe', Swipe);Vue.component('swipe-item', SwipeItem);
三、    <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
                    }
                })
            },

 

其餘有用的文章： 

laravel5.3多字段登陸方法重寫

處理laravel在寶塔中404錯誤的正確配置

TCP/Ip協議的一些圖片

Css書寫規範