VUE에서 v-bind 사용법 소개

이 글은 주로 VUE에서 v-bind의 기본 사용법을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

지난 이틀 동안 v-bind의 기본 사용법을 배웠으니 오늘은 몇 가지 주의사항을 추가하겠습니다.

1.v-bind:class (필요에 따라 선택)

1.1

 <style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #000;
}
.textSize{
  font-size: 30px;
}
</style>

<p id="app">
  <span class="box" :class="{&#39;textColor&#39;:isColor, &#39;textSize&#39;:isSize}">我是字</span>
</p>

<script>
　　new Vue({
  　　el: "#app",
　　data:{
  　　isColor:true,
  　　isSize:true
　　}
　　})
</script>

1.2

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #000;
}
.textSize{
  font-size: 30px;
}
</style>
<p id="app">
  <span class="box" :class="classObject">我是字</span>
</p>
<script>
new Vue({
el: "#app",
data:{
  classObject:{
  &#39;textColor&#39;: true,
  &#39;textSize&#39;: true
  }
  }
})
</script>

1.3

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #0f0;
}
.textSize{
  font-size: 30px;
}
</style>
<p id="app">
  <span class="box" :class="[classA,classB]">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    classA: &#39;textColor&#39;,
    classB: &#39;textSize&#39;
  }
})
</script>

1.4

<style>
.box{
  background-color: #ff0;
}
.textColor{
  color: #0f0;
}
.textSize{
  font-size: 30px;
}
</style>
<p id="app">
  <span class="box" :class="[isA?classA:&#39;&#39;, classB]">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    classA: &#39;textColor&#39;,
    classB: &#39;textSize&#39;,
    isA: false
  }
})
</script>

2.v-bind:style (필요에 따라 선택, 카멜 케이스)

2.1

<p id="app">
  <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
</p>
<script>
  new Vue({
    el: "#app",
    data:{
      activeColor: &#39;red&#39;,
      size: &#39;30px&#39;,
      shadow: &#39;5px 2px 6px #000&#39;
    }
})
</script>

2.2

<p id="app">
  <span class="box" :style="styleObject">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    styleObject:{
    color: &#39;red&#39;,
    fontSize: &#39;30px&#39;,
    textShadow: &#39;5px 2px 6px #000&#39;
    }
  }
})
</script>

2.3

rreee ㅋㅋㅋ ee

위 내용은 전체 내용입니다 이 글이 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

Ueditor 서식 있는 텍스트 편집기와 결합된 Vue.js를 사용하는 방법

연결 유지 데이터 캐싱을 통한 vue 프로젝트 최적화 방법

Vue 구성 요소 옵션 소품 사용 소개

위 내용은 VUE에서 v-bind 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!