vue 스타일 사용 팁

scoped

• scoped 스타일의 선택기가 "깊게"(즉, 자식 구성 요소에 영향을 미치게 하려면) :deep() 의사 클래스를 사용할 수 있다.

<style scoped>
.a ::v-deep.b {
  /* ... */
}
</style>
->
<style>
.a[data-v-f3f3eg9] .b {
  /* ... */
}
</style>

v-bind:style

• 말이 스타일 객체를 정의, 매칭이지 사실 v-bind 를 통해 style 속성을 정의해주는 것이다. 적용된 style객체는 자동으로 케밥 표기법으로 변환되어 style 속성에 지정된다.

정적 데이터

<div id="example1">
  <button id="a" v-bind:style="style1">테스트</button>
</div>
<script type="text/javascript">
  var vm = new Vue({
  	el: "#example",
  	data: {
  	style1: {
		backgroundColor: "aqua", 
  		border: 'solid 1px gray',
  		width: '100px', 
  		textAlign: 'center'
  		}
  	}
  })
</script>

동적 데이터

<div id="example2">
  <button id="a" :style="calcRightPosition">테스트</button>
</div>
<script type="text/javascript">
  var vm = new Vue({
  	el: "#example",
  	data() {
  		return {
  			creditScoreRatio: 5,
  		}
  	}
  	computed: {
  		calcRightPosition() {
  			return {
  			"--right": `calc(${this.creditScoreRatio - 100}% + 42px)`, 
  			};
  		},
  	}
  })
</script>
<style>
  #a {
  	right: var(--right);
  }
</style>