vue中可以用函数的返回来定义一个div的样式吗？

如何解决vue中可以用函数的返回来定义一个div的样式吗？

嘿，我想在我的 div 的 v-bind:style 中调用函数 textposit，它使用 prop textpos 作为参数。函数的返回应该根据参数值改变div的样式。

<div class="container"  :style=" textposit(textpos) ">
       <p class="headline">{{ headline }}</p>
       <p class="text">{{ text }}</p>
</div>

这是我的脚本：

export default {
    name: 'page',components: {
    },props:{
        headline: {
            type: String,},text: {
            type: String,img: {
            type: String,align:{
            type: String,default: "center",textpos:{
            type: String,default: "left",textrows:{
            type: Number,default: 1,}
    },methods:{
      textposit (pos){
            if (pos == "left") {
                return{
                    "grid-column: 4 / 5"
                }
            }
            else{
                 return{
                    "grid-column: 1 / 2"
                }
            }
        }
    }
}

它似乎调用了该​​方法，但并没有改变我的 div 的样式。希望有人能帮忙:)谢谢你

解决方法

此外，您可以将其用作这样的属性值。 （我用颜色来形象化）

const {
  createApp
} = Vue

const App = {
  methods: {
    textposit(pos) {
      if (pos == "left") {
        return "red"
      } else {
        return "blue"
      }
    }
  }
}

Vue.createApp(App).mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div :style="{color: textposit('left')}">TEXT</div>
  <div :style="{color: textposit('somethingelse')}">TEXT</div>
</div>

,

您可以将其定义为计算属性而不是方法：

<div class="container"  :style=" textposit">

脚本：

export default {
    name: 'page',components: {
    },props:{
       //....
    },computed:{
      textposit (){
            if (this.textpos === "left") {
                return{
                    "grid-column": "4 / 5" 
                }
            }
            else{
                 return{
                    "grid-column": "1 / 2"
                }
            }
        }
    }
}

我还将 "grid-column: 4 / 5" 更改为 "grid-column": "4 / 5" 以使其成为有效的对象字段。