Vue中是否可使用函数返回值定义div的style样式及问题排查

问题原因 #

你的:style绑定返回的样式对象不符合Vue的格式要求：Vue的动态样式绑定接收的对象要求CSS属性名为键，属性值为对应的值，你当前将完整的CSS规则字符串作为了对象的键，且没有设置值，因此样式无法被正确识别生效。

修复方案 #

修改textposit方法的返回值格式即可，两种写法可选：

写法1：对象式（更推荐，方便后续扩展多个样式） #

methods:{
  textposit (pos){
    if (pos == "left") {
      return {
        // 可以用驼峰式的CSS属性名，或者加引号的短横线格式'grid-column'
        gridColumn: "4 / 5"
      }
    } else {
      return {
        gridColumn: "1 / 2"
      }
    }
  }
}

写法2：字符串式 #

直接返回完整的CSS样式字符串：

methods:{
  textposit (pos){
    if (pos == "left") {
      return "grid-column: 4 / 5;"
    } else {
      return "grid-column: 1 / 2;"
    }
  }
}

可选优化 #

你的逻辑比较简单，也可以直接把判断写在模板里，不用单独声明方法：

<div class="container"  :style="{ gridColumn: textpos === 'left' ? '4 / 5' : '1 / 2' }">
  <p class="headline">{{ headline }}</p>
  <p class="text">{{ text }}</p>
</div>

内容的提问来源于stack exchange，提问作者Robin G