함수 반환을 사용하여 vue에서 div의 스타일을 정의할 수 있습니까?

함수 반환을 사용하여 vue에서 div의 스타일을 정의할 수 있습니까?

prop textpos를 매개 변수로 사용하는 함수 textposit을 v-bind: style로 호출하고 싶습니다.함수를 반환하면 파라미터 값에 따라 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"유효한 객체필드로 만듭니다.

언급URL : https://stackoverflow.com/questions/67726152/can-i-use-the-return-of-a-function-to-define-the-style-of-a-div-in-vue