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/[email protected]" 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/[email protected]" /></span> 32 <span v-else>收起更多<img src="@/assets/images/icon/[email protected]" 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 // industry financial management 109 googsDetail (to targetUrl) { 110 the let goodsData = {path: "Jump / Webview", Data: {URL: to targetUrl, Navigation: to false }}; 111 JsBridge ( null , goodsData); 112 } 113 // other listings 114 goodsDetail (courseId) { 115 the let goodsData = {path: "Home / Jump / CourseInfo" , Data: ID {:}} courseId; 1 16 JsBridge ( null , goodsData); 117 } 1 18 } 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>
1.使用this.$set(obj, key, value)/vue.set(obj, key, value)
<script> export default { data() { return { student: { name: '张三', } } }, methods: { setMessage() { this.$set(this.student, 'age', 15) console.log(this.student) } } } </script>
2. Object.assign (target, sources) Method
<script> export default { data() { return { student: { name: '张三', } } }, methods: { setMessage() { this.student.age = 15 this.student = Object.assign({}, this.student) console.log(this.student) } } } </script>
We found that after adding attributes to objects by these two methods, the object of his body more than get and set methods, so this time we once again operating the property and they will lead to an updated view of the matter