ajax请求
关于ajax请求,只要不是success,那么说明后台的代码出错了,或者自己的链接没有书写正确 。
返回error的话,检查链接是否正确,检查联调IP是否书写正确。
error是程序出错的状态、sussesss是成功的状态、fail是指请求之后后台也处理了,只是业务逻辑出错了,后台返回告诉前端是出错了。
键值中的判空操作
今天需要判断后台返回的数据中的一个值是否为空,从而再决定是否展示这个数据。具体的实现以下所示(以后遇到类似操作即可)
涉及到的知识点:Vue.set、vm.$set、判空、v-show
javascript
for (i in proList.pList) {
if (proList.pList[i].remark == null) {
proList.$set(proList.pList[i], 'suggestInfo', false);
} else {
proList.$set(proList.pList[i], 'suggestInfo', true);
}
console.log(proList.pList[i].suggestInfo);
}
HTML
<div class='mui-col-xs-6 mui-col-sm-6' v-show="proList.suggestInfo">建议:{{proList.remark}}</div>
vm.$set(target,key,value)
v-bind:class
今天还有一个比较有意思的地方,使用v-for渲染HTML的多条数据,需要处理多条数据中的第一条,这个时候使用:first-child选择器是没有作用的,因为加载CSS样式的时候,HTML还没有加载。实现的方法参考这篇文章。
<li class="mui-table-view-cell line-item" v-for="(proList,index) in pList" >
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-1 mui-text-left process-bg">
<div class="pro-bg">
<div class="circle" v-bind:class="{last : index === 0}"> </div>
</div>
</div>
</div>
</li>
可以说很奇妙。
关于v-bind:class的总结:可以绑定返回对象的计算属性