①. vue 三元表达式及类似用法
<div id="app"> <span :style="{'color':status === true ? '#FF5757':'#757575'}">测试</span> <div>===========</div> <div>{{age==24?'tangzhi':age==23?'yangxing':'yangyang'}}</div> <div>===========</div> <!-- 使用一个函数去处理 --> <span> {{ listType(3)}} </span> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ //格式:<:style="{'属性名':三元表达式}"> status:false, age:24 }, methods:{ //如果有多列,使用一个函数来处理 listType(type){ switch(type){ case 1: return '支援申请书'; break; case 2: return '事故车照片'; break; case 3: return '定损协议'; break; case 4: return '结算单'; break; case 5: return '维修定损发票'; break; default: return '未知'; } } } }); </script>
②. 当element-ui的el-dialog组件中包含子组件时
- ①. 问题呈现:我在一个el-dialog组件中包含子组件时,使用$refs失效
(element-ui的el-dialog组件中包含了一个子组件)
this.showAccidentFilePage=true;//打开上传文件弹出层 vue.nextTick(()=>{ this.$refs.accidentFilePageRef.reloadFilePage(params) })
②. 解决办法:
this.showAccidentFilePage=true;//打开上传文件弹出层 setTimeout(()=>{ this.$refs.accidentFilePageRef.reloadFilePage(params) },0)