Vue-给对象新增属性(使用Vue.$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>
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)方法
<script> export default { data() { return { student: { name: '张三', } } }, methods: { setMessage() { this.student.age = 15 this.student = Object.assign({}, this.student) console.log(this.student) } } } </script>
我们发现，通过这两种方式为对象添加属性之后，他的对象身上多了get和set方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新啦
