CODEWITHSUNDEEP
vue.js
Max
Max

Reputation: 55

Passing data to vue.js method

I have a variable with color. I want to change the color of the text. How can I set this variable to v-bind: style event?

  <div class="drop" :style="'color:{{item.color}};'">
     some text
  </div>

Upvotes: 1

Views: 41

Answers (2)

steve16351
steve16351

Reputation: 5812

As described in the Vue documentation here, you can use the following object syntax to bind styles:

<div class="drop" :style="{ color: item.color }">
     some text
</div>

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28434

Here is an example of style binding:

new Vue({
  el:"#app",
  data: () => ({ item: { color:'red' } })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="drop" :style="{ color: item.color }">
    some text
  </div>
</div>

Upvotes: 1

Related Questions