JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <div class="demo" :style="{backgroundColor: color}"></div>
  <div class="demo" :style="myStyle"></div>
  <div class="demo" :style="[myStyle, {height: width + 'px'}]"></div>
  <input type="text" v-model="color">
  <input type="text" v-model="width">

  <p>この場合はクラスで色を指定していなくても色んな色が使える…</p>
  
</div>

CSS

.demo {
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}

JavaScript

new Vue({
el: '#app',　
data: {
	color: 'gray',
  width: 100
},
computed: {
	myStyle: function() {
  	return {
    	backgroundColor: this.color,
      width: this.width + 'px'
    }
  }
},
methods: {

}
});