【实用】数据交互---持续更新

banner 获取后台数据

/* css */
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in allBanner">
            <img :src="imgSrc + item.bannerPic" width="100%" alt="">
        </div>
    </div>
    <!--<div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>-->
</div>

// vue

// 数据交互
bannerList:function (id){
    axios.post(allUrl2.banner).then((response) => {
        if (response != "" && response.code == 0) {
            this.allBanner = response.data
            this.$nextTick(() => { // 获取数据后在执行swiper【必加】
                this.banner();
            })
        }else {

        }
    }).catch(function () {

    });
},
//swiper
banner:function(){
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },
        loop: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper 【必加】
        observeParents: true //修改swiper的父元素时，自动初始化swiper【必加】
    })
},

购物车 加减数量

<!-- 该数字可以直接做加减 -->
<span class='cut'@click="item.number>0 && item.number--"> - </span>
<span class="font"> {{item.number}} </span>
<span class="add" @click="item.number++"> + </span>