Vue 之动态列表的样式的动态绑定 v-bind:style="****"

在Vue项目中遇到动态列表中的某些字的颜色要与其内容的变化而变化

如图

 

 根据 用户是否 注册来 动态改变 其文字的颜色

Html

    <el-col :span="8" v-for="(dataItem, index) in pageContentData" :key="index">
              <div class="content-item">
                <div class="item-title">
                  <div class="item-left">
                    <div class="item-img" v-bind:style="dataItem.background_color" ></div>
                    <div class="item-name" v-bind:style="dataItem.font_color"  >{{dataItem.userName}}</div> <!-- style="color:#c07607" -->
                  </div>
                  <div class="item-right">
                    <div class  v-bind:style="dataItem.font_color" >{{dataItem.number}}</div>
                    <div class  v-bind:style="dataItem.font_color" >{{dataItem.isRegister}}</div> <!-- {{dataItem.isRegister ? '未注册' : '已注册'}} -->
                    <div class  v-bind:style="dataItem.font_color" >{{dataItem.call_status}}</div>
                  </div>
                </div>
              </div>
       </el-col>

其中  v-bind:style="dataItem.font_color"   为绑定的数据

Js

 if(data[k].status=="online"){ 
      this.extensionMonitorData[i].list[j].isRegister="已注册";
      this.extensionMonitorData[i].list[j].font_color=""; //"color:#BEBEBE"
      this.extensionMonitorData[i].list[j].background_color="";//"background-color:#BEBEBE"
 }else{
      this.extensionMonitorData[i].list[j].isRegister="未注册";this.extensionMonitorData[i].list[j].font_color="color:#BEBEBE"; //"color:#BEBEBE"
      this.extensionMonitorData[i].list[j].background_color="background-color:#BEBEBE";//"background-color:#BEBEBE" 
}