Question

我很好奇，是否可以在Vue.js中绑定内联样式？我对类绑定很熟悉，但是如果有时由于某种原因想要内联绑定样式语句，是否可以像对类一样进行绑定呢？

例如，

<template>
  <div>
      <h1 :style="{('background:red') : condition}"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script> 
export default {
  data(){
   return {
   condition:false 
          }
         }
   }
</script>

在上面的示例中，当条件变为真时，我想更改元素的背景。

Answer 1

当然可以按照此处的描述进行操作：https://vuejs.org/v2/guide/class-and-style.html

<template>
  <div>
      <h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script> 
export default {
  data(){
   return {
   condition:false,
   activeColor: 'white',
   fontSize: 12
          }
         }
   }
</script>

Answer 2

是的，请通过docs

注意：请使用computed，methods而不是内联以进行更好的调试

<template>
  <div>
    <h1 :style="styleObject"> Text </h1>
    <button @click='toggleCondition'>Click me</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      condition: false,
    };
  },
  computed: {
    styleObject() {
      return this.condition ? { background: 'red' } : {};
    },
  },
  methods: {
    toggleCondition() {
      this.condition = !this.condition;
    },
  },
};

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

可以将内联样式与vue.js绑定吗？

2 个答案: