Vue用法整理01

动态绑定 id 和改变class

• template里面

<!-- 用户列表 -->
<block v-for="(item,index) in vip" :key="index">
    <view class="grace-accordion-items">
        <view :class="[accordionActive == 'grace-accordion-'+index ? 'grace-accordion-title grace-current' : 'grace-accordion-title']"
              :id="'grace-accordion-'+index" @tap="changeAccordion">
            {{item.u_nickname}}
            <text class="grace-list-imgs-arrow grace-iconfont icon-arrow-up" v-if="accordionActive ==  'grace-accordion-'+index "></text>
            <text class="grace-list-imgs-arrow grace-iconfont icon-arrow-down" v-else></text>
        </view>
        <view class="grace-accordion-body" v-if="accordionActive ==  'grace-accordion-'+index">
            <view class="grace-list" style='border:none;'>
                <view class='items'>
                    <view class='title'>列表1</view>
                </view>
                <view class='items'>
                    <view class='title'>列表2</view>
                </view>
                <view class='items'>
                    <view class='title'>列表3</view>
                </view>
            </view>
        </view>
    </view>
</block>

• script里面

    export default {
        data() {
            return {
                vip: [], //管理的客户名字数组
                accordionActive: "grace-accordion-0", //默认选中
                // accordionIndex:'',//当前点击的
            }
        },
        methods: {
            changeAccordion: function(e) {
                var accordionIndex = e.currentTarget.id;
                console.log(accordionIndex);
                if (this.accordionActive == accordionIndex) {
                    accordionIndex = '';
                }
                this.accordionActive = accordionIndex;
            },
        },
    }

获取data-xxx自定义属性

this.$refs 取不到 显示 undefined的

//很重要 methods中调用，$refs是异步处理才能拿到实例对象。
_self.$nextTick(() => {
   _self.$refs.xuetang.init();
});

https://blog.csdn.net/changzhen11/article/details/84067816
https://www.jianshu.com/p/a7550c0e164f