Vue中给style绑定动态值

以绑定style高度为例，高度为当前屏幕的高度

第一种方式：

1、定义style

<div :style="{width: '100%',height: screenHeight,border: '1px solid rebeccapurple', color: 'red', display: 'flex'}">
</div>

注意注意！！！
对于像 margin-left 这样的样式，需要写成 marginLeft

<li :style="{marginLeft: '10%', marginTop: index != 0 ? '15px' : '0px',width: '150px',height: '30px',lineHeight:'30px',background: '#F7F7F7',borderRadius: '4px', textAlign: 'center'}">{{item}}</li>

2、获取屏幕的高度

• 在computed属性中获取屏幕的高度

computed: {
      screenWidth: function () {
        return document.body.clientWidth + 'px';
      },

      screenHeight: function () {
        return document.body.clientHeight + 'px';
      }
    },

• 注意这里的screenHeight无需在data中定义

第二种方式：

1、在data中定义一个变量

data() {
      return {
        active: "",
              }
        }

2、在style中定义样式

<style lang="scss">
  .active {
    background-color: #DBE7FF
  }
</style>

3、在标签上使用

<div v-for="(item,index) in moduleList" :key="item.index">
                <p :class="{active : active === index}" style="height: 35px; line-height: 35px; margin-left: 15%; margin-top: 10%;" @click="chooseModule(item,index)">{{item}}</p>
</div>