vue中可以用函数的return定义div的样式吗？

Question

嘿，我想在我的 div 的 v-bind:style 中调用函数 textposit，它使用 prop textpos 作为参数。函数的 return 应根据参数值更改 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的样式。希望有人能帮忙:)谢谢你

Answer 1

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

<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" 以使其成为有效的对象字段。

Answer 2

此外，您可以像这样将其用作属性值。（我用颜色来可视化它）

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>

vue中可以用函数的return定义div的样式吗？

Can I use the return of a function to define the style of a div in vue?

javascript

css

vue.js

vuex