CSS Vue Test

by gbkim1988

HTML

<div id="app">
  <div class="demo"
    @click="attachRed = !attachRed"
    :class="divClass"
  ></div>
  <div class="demo" :class="divClass"></div>
  <div class="demo" :class="color"></div> <br>
	<label>class: </label><input type="text" v-model="color">
	<hr>
	<!-- style attribute 에 직접 할당할 수 있다. -->
	<div class="demo" :style="myStyle"></div>
	<div class="demo" :style="myStyle"></div> <br>
	<label>background-color: </label><input type="text" v-model="color"> <br>
	<label>width(px): </label><input type="text" v-model="width">
	<hr>
	<!-- Array 를 사용하여 style 을 할당할 수 있다. -->
	<div class="demo" :style="[myStyle, {height: width+'px'}]"></div> <br>
	<label>background-color: </label><input type="text" v-model="color"> <br>
	<label>width(px): </label><input type="text" v-model="width">
</div>

CSS

.demo {
  width: 200px;
  height: 200px;
  padding: 20px;
  display: inline-block;
  background-color: grey;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

Vue

new Vue({
  el: "#app",
  data: function() {
  	return {
    	attachRed: false,
			color: "green",
			width: 100,
    };
  },
	computed: {
		divClass: function() {
			return {
				red: this.attachRed,
				blue: !this.attachRed
			};
		},
		myStyle: function() {
			return {
				backgroundColor: this.color,
				width: this.width + "px",
			}
		}
	}
})