this.$set的应用

  1 <template>
  2   <div class="practice">
  3     <div class="advertising">
  4       <div class="pic">
  5         <img :src="advert.image" alt @click="goodsNews(advert)" />
  6         <div class="message" v-show="advert.informationTitle">
  7           <p>{{advert.informationTitle}}</p>
  8         </div>
  9       </div>
 10       <div class="news" v-show="informationTitleList.length">
 11         <p  v-for="(item,index) in informationTitleList" :key="index" @click="littleNews(item.skipUrl)">
 12           <i class="circle"></i><span>{{item.title}}</span>
 13         </p>
 14       </div>
 15       <div class="more" v-show="informationTitleList.length">
 16         <span @click="moreNews">更多资讯 <img src="@/assets/images/icon/btn-close-green@2x.png" class="right"/></span>
 17       </div>
 18     </div>
 19     <div class="subject-goods">
 20       <h4>{{loadingPage.name}}</h4>
 21       <div class="goods" >
 22         <vipGoods v-for="(item,index) in loadingPage.list" :key="index" :goodsData="item" @googsDetail="googsDetail(item.targetUrl)" ></vipGoods>
 23       </div>
 24     </div>
 25     <div class="subject-goods" v-for="(item,index) in goodsList" :key="index">
 26       <h4>{{item.categoryName}}</h4>
 27       <div class="goods" v-for="(item,indexs) in item.agivList" :key="indexs" >
 28         <GoodItem v-if=‘indexs<=curr[index]‘ :goodItemDetail="item"  @goodsDetail="goodsDetail(item.id)"></GoodItem>
 29       </div>
 30        <div class="more" @click="unfold(index,item)" v-show="item.agivList.length > 4">
 31           <span v-if="curr[index] === 3">展开更多<img src="@/assets/images/icon/btn-close-green@2x.png" /></span>
 32           <span v-else>收起更多<img src="@/assets/images/icon/btn-close-green@2x.png" class="moreGoods"/></span>
 33       </div>
 34     </div>
 35   </div>
 36 </template>
 37 
 38 <script>
 39 import GoodItem from "../../../components/GoodItem";
 40 import vipGoods from "../../../components/vipGoods";
 41 import {JsBridge,isNativeApp} from ‘@/utils/bridge‘;
 42 export default {
 43   props:{
 44    curTabChild:{ 
 45     type: Number,
 46     default: 9
 47     }
 48   },
 49   components: {
 50     GoodItem,
 51     vipGoods
 52   },
 53   data() {
 54     return {
 55       advert: {},
 56       goodsList: [],
 57       informationList: [],
 58       loadingPage: {},
 59       curr:[],
 60     };
 61   },
 62   mounted() {
 63     let data = {
 64       categoryId: this.curTabChild,
 65     }
 66     this.$api.accountPractice(data).then(res => {
 67         if (res && res.code == 200) {
 68             this.advert = res.data.advert;
 69             this.goodsList = res.data.goodsList;
 70             this.curr = new Array(res.data.goodsList.length).fill(3);
 71             this.informationList = res.data.informationList;
 72             this.loadingPage = res.data.loadingPage; 
 73         }
 74       })
 75   },
 76   computed: {
 77     informationTitleList: function() {
 78       return this.informationList.slice(0,2)
 79     }
 80   },
 81   methods: {
 82     unfold(index,item) {
 83       if (this.curr[index] === 3) {
 84         this.$set(this.curr,index,item.agivList.length); 
 85       } else {
 86         this.$set(this.curr,index,3);
 87       }
 88
 89     },
 90     // 商品或者资讯跳转
 91     goodsNews(val) {
 92       if(val.type === ‘IMAGE‘) {
 93         JsBridge(null, {path:"jump/news",data:{skipUrl:val.skipUrl}});
 94       } else {
 95         let goodsData = { path:"home/jump/courseInfo",data:{id:goodsId}};
 96         JsBridge(null, goodsData);  
 97       }
 98     },
 99     // 更多资讯
100     moreNews() {
101       JsBridge(null, {path:"jump/moreNews",data:{categoryId:this.curTabChild}});
102     },
103     // 部分资讯
104     littleNews(val) {
105       let newsData = {path:"jump/news",data:{skipUrl:val}};
106       JsBridge(null, newsData);
107     },
108     // 行业财务管理
109     googsDetail(targetUrl) {
110       let goodsData = { path:"jump/webview",data:{url:targetUrl, navigation: false}};
111       JsBridge(null, goodsData);
112     },
113     // 其他商品詳情
114     goodsDetail(courseId) {
115       let goodsData = { path:"home/jump/courseInfo",data:{id:courseId}};
116       JsBridge(null, goodsData);
117     }
118   }
119 };
120 </script>
121 <style lang=‘less‘ scope>
122 .practice {
123   .advertising {
124     // padding-top: 42px;
125     .pic {
126       width: 100%;
127       height: 382px;
128       position: relative;
129       padding: 0px 36px;
130       img {
131         width: 100%;
132         height: 100%;
133       }
134       .message {
135         width: 678px;
136         height: 80px;
137         white-space: nowrap;
138         text-overflow: ellipsis;
139         overflow: hidden;
140         line-height: 80px;
141         background: rgba(0, 0, 0, 1);
142         opacity: 0.5;
143         border-radius: 0px 0px 12px 12px;
144         position: absolute;
145         bottom: 0;
146         p {
147           padding-left: 24px;
148           font-size: 28px;
149           font-family: Microsoft YaHei;
150           font-weight: 400;
151           color: #ffffff;
152           opacity: 1;
153         }
154       }
155     }
156     .news {
157       p {
158         padding: 36px 60px 32px 60px;
159         line-height: 10px;
160         font-size: 26px;
161         font-family: Microsoft YaHei;
162         font-weight: 400;
163         color: rgba(58, 60, 66, 1);
164         opacity: 1;
165         .circle{
166         display:inline-block;
167         margin-right:10px;
168         margin-bottom: 3px;
169         width:8px;
170         height:8px;
171         border-radius:100%;
172        background:rgba(224,224,224,1);
173       }
174       }
175     }
176     .more {
177       //   width: 100%;
178       height: 96px;
179       background: rgba(255, 255, 255, 1);
180       box-shadow: 0px 20px 30px rgba(58, 60, 66, 0.03);
181       opacity: 1;
182       line-height: 96px;
183       text-align: center;
184       .right {
185         margin: 33px 12px 0 0;
186         width: 30px;
187         height: 30px;
188         transform: rotate(270deg)
189       }
190       span {
191         font-size: 28px;
192         font-family: Microsoft YaHei;
193         font-weight: 600;
194         color: #00ab84;
195         opacity: 1;
196       }
197     }
198   }
199   .subject-goods {
200     margin-top: 66px;
201     padding: 0px 36px;
202     box-shadow: 0px 10px 30px rgba(58, 60, 66, 0.03);
203     overflow: hidden;
204     h4 {
205       font-size: 40px;
206       font-family: Microsoft YaHei;
207       font-weight: bold;
208       // line-height: 38px;
209       color: rgba(58, 60, 66, 1);
210       opacity: 1;
211       margin-bottom: 34px;
212     }
213     .goods {
214       .item {
215         float: left;
216         margin-bottom: 30px;
217         width: 330px;
218       }
219       .item:nth-child(2n) {
220         float: right;
221       }
222       .goodItem {
223         padding-left: 0px;
224       }
225     }
226     .more {
227       //   width: 100%;
228       height: 96px;
229       background: rgba(255, 255, 255, 1);
230       box-shadow: 0px 20px 30px rgba(58, 60, 66, 0.03);
231       opacity: 1;
232       line-height: 96px;
233       text-align: center;
234       img {
235         margin: 33px 12px 0 12px;
236         width: 30px;
237         height: 30px;
238       }
239       .moreGoods {
240         transform: rotate(180deg);
241       }
242       span {
243         font-size: 28px;
244         font-family: Microsoft YaHei;
245         font-weight: 600;
246         color: #00ab84;
247         opacity: 1;
248       }
249     }
250     .more {
251       //   width: 100%;
252       height: 96px;
253       background: rgba(255, 255, 255, 1);
254       box-shadow: 0px 20px 30px rgba(58, 60, 66, 0.03);
255       opacity: 1;
256       line-height: 96px;
257       text-align: center;
258       span {
259         font-size: 28px;
260         font-family: Microsoft YaHei;
261         font-weight: 600;
262         color: #00ab84;
263         opacity: 1;
264       }
265     }
266   }
267 }
268 </style>

<script>
export default {
 data() {
   return {
     student: {
       name: ‘张三‘,
     }
   }
 },
 methods: {
   setMessage() {
     this.$set(this.student, ‘age‘, 15)
     console.log(this.student)
   }
 }
}
</script>

<script>
export default {
  data() {
    return {
      student: {
        name: ‘张三‘,
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      this.student = Object.assign({}, this.student)
      console.log(this.student)
    }
  }
}
</script>