|
- data: {
- indicatorList:[]
- },
复制代码 我在子组建的data中定义了一个数组,然后我通过一个change事件去改变数组的值。template部分- <template>
- <div class="banner">
- <swiper
- loop="{{loop}}"
- autoplay="{{autoplay}}"
- interval="{{interval}}"
- @change="swiperChange" >
- <block for="{{list}}">
- <image @click="jumpTo($item.link)" src="{{$item.url}}"></image>
- </block>
- </swiper>
- <div class="my-indicator">
- <block for="indicatorList">
- <text class="{{$item}}"></text>
- </block>
- </div>
- </div>
-
- </template>
复制代码 js部分:- export default {
- props: {
- loop: {
- type: Boolean,
- default: true
- },
- autoplay: {
- type: Boolean,
- default: false
- },
- interval: {
- type: Number,
- default: 3000
- },
- list:{
- type: Array,
- default:[]
- }
- },
- data: {
- indicatorList:[]
- },
- onInit(){
- //console.log(this.bannerList);
- console.info(`外部传递的数据`,this.loop,this.autoplay,this.list);
- var that = this;
- that.list.forEach(function(){
- that.indicatorList.push('');
- })
- console.log(that.indicatorList);
- },
- swiperChange(evt){
- for(var i=0;i < this.indicatorList.length;i++){
- if(i === evt.index){
- console.log('jin');
- this.indicatorList[i] = 'active';
- }else{
- this.indicatorList[i] = '';
- }
- }
- console.log(this.indicatorList);
- },
- jumpTo(link){
- console.log(`myswiper组件的link`,link);
- if(link !=='' && link !== undefined){
- router.push({
- url:link
- })
- }
- }
- }
复制代码
数组数据也变化了 如附件图片……
但是text的class并没有变化。求大神指点迷津啊
|
-
|