Vue style 动态绑定

方法1:

<div class="flex peopleRygl-main-left-nr03 " :style="divStyleZdfw() ">

return{
	divStyle11: {
        color: 'red',
        fontSize: '14px',
        backgroundColor: 'yellow',
        alignItems: 'flex-start'
      }
}

 divStyleZdfw(param){
      console.log(new Date().toLocaleString())
      console.log(param)
      return this.divStyle11
    }

方法2:

<div class="flex peopleRygl-main-left-nr03 " :style="{ backgroundColor: 'yellow',alignItems:'flex-start' }">

方法3:

<div class="flex peopleRygl-main-left-nr03 " :style="{alignItems:divStyleZdfw(peopleForm) }">

    divStyleZdfw(param){
      // let rStyle = "{align-items: flex-start;}"
      // if(validatenull(param) || validatenull(param.zdfw)) return rStyle;
      // if(param.zdfw.length > 12) rStyle = "{align-items: flex-center;}"
      // return rStyle;
      console.log(new Date().toLocaleString())
      console.log(param)
      return "center"
    }

方法4:

<div class="flex peopleRygl-main-left-nr03 " :style="divStyleZdfw(peopleForm)">

   divStyleZdfw(param){
      let rStyle = {alignItems: 'flex-start'}
      // if(validatenull(param) || validatenull(param.zdfw)) return rStyle;
      // if(param.zdfw.length > 12) rStyle = {alignItems: 'center'}
      rStyle = {alignItems: 'center'}
      return rStyle;

      // return this.divStyle11
    }
posted @ 2024-09-11 11:11  寒冷的雨呢  阅读(22)  评论(0编辑  收藏  举报