Vue项目中遇到的小问题

1、v-if、v-show、hidden的区别

<el-col :span="12">
 <el-form-item label="剩余风险水平" prop="sriskseverity_td">
   <!-- 
     这里使用<td>的话，document.getElementById("sriskseverity_td").innerText= "#" + colorcode; 是可以更改单元格里的内容的。
     如果使用的是<input>标签则是document.getElementById("sriskseverity_td").value = "" 
   -->
   <!-- <td id="sriskseverity_td"></td> -->
   <!-- 这里如果使用hidden的话，也会占位置；用v-if既不显示内容，也不占地方，直接操作的dom元素，将整个dom元素添加或删除；v-show是我想要的隐藏，既不占地方也能取到值 -->
   <el-input id="sriskseverity" hidden/>
   <el-input id="scolorcode111" v-show="false" />
   <el-input id="scolorcode222" v-if="false" />
   <el-input id="sriskseverity_td" />
 </el-form-item>
</el-col>

getT21_pub_fin_fre_mp(level){
  let sriskcofre = this.t21_rcsa_rkresult.sriskcofre  
  if(sriskcofre != undefined){
    let param = {
      freqid: sriskcofre, //风险发生可能性
      srtid: level
    }
    axios.post(`${this.global.GRC_URL}/grc/rcsa/performAjax_getSevrityValueDo`, param).then(res => {
      for(var i = 0; i < res.data.returnlist.length; i++){
        // 分值对应颜色
        document.getElementById("sriskseverity_td").style.background = "#" + res.data.returnlist[i].colorcode;
        // <td>标签
        // document.getElementById("sriskseverity_td").innerText = res.data.returnlist[i].servitydesc;
        // <input>标签
        document.getElementById("sriskseverity_td").value = res.data.returnlist[i].servitydesc;
        document.getElementById("sriskseverity").value = res.data.returnlist[i].grad;
        document.getElementById("scolorcode").value = res.data.returnlist[i].colorcode;
      }
    }).catch(err => {
      console.log(err);
    })
  }
},

效果：