vue开发项目中遇到的问题

• 使用swiper插件生成轮播图, 图片卡死不能滑动的bug

  原因: 数据还没有渲染完成, 已经创建了Swiper对象
  解决办法: 请求回来的数据是banners, 在watch中监视banners, 使用vue的$nextTick回调方法,在数据加载完成就执行里面的代码

 watch: {
        banners(value) {
            // 界面更新执行$nextTick()立即创建swiper对象
            this.$nextTick(() => {
                var bannerSwiper = new Swiper(".swiper-banner", {
                    // 循环播放
                    loop: true,
                    // 自动播放
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    // 小圆点
                    pagination: {
                        el: ".banner_pagination"
                    }
                });
            });
        }
    }

• 绑定多个事件

<button id="button2" v-on:click="clickButton1();clickButton2()" v-on:click="">按钮2</button>

• 列表的状态切换(点击某一列添加样式)

<div id="app">
    <ul>
        <li v-for="(item,index) of arr"
            :key="index"
            @click=changeCurrent(index)
            :class="{current:num==index}">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
            data:{
                arr:["语文","数学","英语","物理"],
                num:0
            },
            methods:{
                changeCurrent(index){
                    this.num=index
                }
            }
    });