v-bind가 클래스 속성을 동적으로 바인딩하는 방법에 대한 자세한 설명
v-bind는 어떻게 클래스 속성을 동적으로 바인딩하나요? 이 기사는 클래스 속성을 동적으로 바인딩하는 v-bind 명령어의 다양한 구문에 대한 자세한 이해를 제공할 것입니다. 도움이 되기를 바랍니다.
v-bind는 클래스 속성을 동적으로 설정하여 동적 스타일을 구현할 수 있습니다. 작성 방법 :
<!--完整写法--> <标签名 v-bind:class="vue实例中的数据属性名"/> <!--简化写法--> <标签名 :class="vue实例中的数据属性名"/>
1. v-bind는 클래스 속성(객체 구문)을 동적으로 바인딩합니다.
클래스 속성을 동적으로 바인딩한 후 클래스의 값이 변수가 되어 데이터에 동적으로 배치될 수 있습니다. 스타일을 바인딩하여 클래스를 동적으로 전환합니다. (학습 동영상 공유: vue 동영상 튜토리얼)
1. {}{}绑定一个或多个类
v-blid:class的属性中可以传入一个对象，对象中包括一组组键值对
:class= "{key1：value1，key2：value2...}"类名就是对应的样式，也就是键（key）；value就是对应着增加和移除该类，取值是true和false
若value值为
true，则该key样式起作用若value值为
false，则该key样式不起作用
<!-- 样式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h2 id="message">{{message}}</h2>
<!-- 第一种：直接用style中的样式，固定写死； -->
<h2 id="message">{{message}}</h2>
<!-- 第二种：用指令v-bind,class的属性值color为变量； -->
<!-- vue解析，变量对应data中color属性值，则用了color的样式； -->
<h2 id="message">{{message}}</h2>
<!-- 第三种：用指令v-bind；后面接对象{key1：value1，key2：value2} -->
<!-- isColor为false则color样式不起作用。 -->
<!-- isBackground为true则background样式起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
color:"color",
isColor:false,
isBackground:true
}
})
</script>
v-bind:class 指令也可以与普通的 class 属性共存。
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>data: {
isActive: true,
hasError: true
}
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 false，class 列表将变为 "static active"。
data: {
isActive: true,
hasError: false
}
2、绑定的数据对象不必内联定义在模板里，可绑定到一个类对象classObject
<!-- 样式 -->
<style>
.color {
color: red;
}
.background {
background-color: pink;
}
</style><div id="app">
<h2 id="message">{{message}}</h2>
<!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
<!-- color为true则color样式起作用。 -->
<!-- background为false则background样式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
classObject: {
color: true,
background: false
}
}
})
</script>
3、也可以绑定一个返回对象的计算属性
<div id="app">
<h2 id="message">{{message}}</h2>
<!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->
<!-- color为true则color样式起作用。 -->
<!-- background为false则background样式不起作用。 -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
isColor: true,
isBackground: true
},
computed: {
classObject: function () {
return {
color: this.isColor,
background: this.isBackground
}
}
}
})
</script>
4、class中的对象比较复杂，则直接放在一个methods中，然后调用这个函数，实现动态切换
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" ></script>
<style>
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 id="方法methods-message">方法methods：{{message}}</h2>
<h2 id="计算属性computed-message">计算属性computed：{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
isAcitve:true,
isLine:true
},
methods:{
btnClick: function () {
this.isAcitve = !this.isAcitve
},getClasses:function () {
return {active:this.isAcitve,line:this.isLine}
}
},
computed: {
classes: function () {
return {active:this.isAcitve,line:this.isLine}
}
}
})
</script>
</body>
</html>
二、v-bind动态绑定class属性（数组语法）
我们可以把一个数组传给 :class，以应用一个 class 列表；
数组语法格式为：
:class="[base1,base2]"
v-bind 动态绑定class 数组语法，就是直接给其传入一个数组，但是数组里面都是类名，数组中的类名，在页面中都会被加入到该标签上。通过数组内元素的增加或减少来实现，样式的改变。
注意：这里面的类名都需要用
' '
v-blid:class를 통해 하나 이상의 클래스를 직접 바인딩할 수 있습니다. 객체에는 키-값 쌍 세트가 포함됩니다.<h2 id="message">{{message}}</h2>입니다. true 및 false- 값이
true이면 키 스타일이 작동합니다 값이
false이면 키 스타일이 작동하지 않습니다
<h2 id="message">{{message}}</h2>
<h2 id="message">{{message}}</h2>
<h2 id="message">{{message}}</h2>
方法methods：{{message}}
计算属性computed：{{message}}
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active:'active',
line:'bbbbbbbbbb'
},
methods:{
getClasses: function () {
return [this.active,this.line]
}
},
computed: {
classes: function () {
return [this.active,this.line]
}
}
})
</script>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
v-bind:class< /code > 지시문은 일반 클래스 속성과 공존할 수도 있습니다. <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><div v-bind:class="[{ active: isActive }, errorClass]"></div></pre><div class="contentsignin">로그인 후 복사</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" ></script>
<style>
.aaa{
padding: 10px;
}
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="[&#39;aaa&#39;,&#39;active&#39;]">{{message}}</div>
<div :class="[&#39;aaa&#39;, nba, isActive? &#39;active&#39;: &#39;&#39;]">{{message}}</div>
<div :class="[&#39;aaa&#39;, nba, {&#39;actvie&#39;: isActive}]">{{message}}</div>
</div>
<script>
const app = new Vue({
el: &#39;#app&#39;,
data() {
return {
message: "Hello World",
nba: &#39;line&#39;,
isActive: false
}
}
})
</script>
</body>
</html></pre><div class="contentsignin">로그인 후 복사</div></div><img src="https://img.php.cn/upload/image/286/934/712/166010371928412v-bind%EA%B0%80%20%ED%81%B4%EB%9E%98%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%84%20%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C%20%EB%B0%94%EC%9D%B8%EB%94%A9%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%9E%90%EC%84%B8%ED%95%9C%20%EC%84%A4%EB%AA%85" title="166010371928412v-bind가 클래스 속성을 동적으로 바인딩하는 방법에 대한 자세한 설명" alt="v-bind가 클래스 속성을 동적으로 바인딩하는 방법에 대한 자세한 설명"><p></p> <code>isActive 또는 hasError가 변경되면 그에 따라 클래스 목록이 업데이트됩니다. 예를 들어 hasError 값이 false인 경우 클래스 목록은 "정적 활성"이 됩니다. rrreee
2. 바인딩된 데이터 개체는 템플릿에서 인라인으로 정의할 필요가 없지만 클래스 개체 classObject에 바인딩할 수 있습니다.
🎜🎜🎜4. 클래스 내 객체 더 복잡하다면 메소드에 직접 넣은 다음 이 함수를 호출하여 동적 전환을 구현하세요🎜🎜rrreee🎜
🎜🎜🎜🎜 2. v-bind는 클래스 속성을 동적으로 바인딩합니다(배열 구문) 🎜🎜🎜🎜We 배열을 전달할 수 있습니다. 클래스 목록을 적용하려면 :class를 제공하세요. 🎜🎜배열 구문 형식은 다음과 같습니다. 🎜rrreee🎜v-bind 동적으로 바인딩된 클래스 배열 구문은 배열을 직접 전달하는 것이지만 모두 있습니다. 클래스 이름입니다. 배열의 클래스 이름이 페이지의 레이블에 추가됩니다. 배열의 요소를 추가하거나 빼면 스타일이 변경됩니다. 🎜🎜참고: 여기의 클래스 이름은 ' '로 래핑되어야 합니다. 래핑되지 않으면 Vue는 이를 데이터의 속성으로 처리하고 데이터에서 이를 검색합니다. 데이터에 이러한 속성이 있으므로 오류가 발생합니다. 이는 Vue에서 일반적입니다. 따옴표 없이 데이터의 속성으로 처리됩니다🎜🎜🎜참고: 객체 구문과 마찬가지로 충돌 없이 일반 클래스와 동시에 존재할 수 있습니다.🎜rrreee🎜🎜🎜🎜예:🎜 rrreee🎜🎜🎜 🎜조건에 따라 목록의 클래스를 전환하려는 경우 삼항 표현식을 사용할 수 있습니다. 🎜rrreee🎜이와 같이 작성하면 항상 errorClass가 추가되지만 isActive가 true인 경우에만 activeClass가 추가됩니다. 🎜🎜그러나 조건부 클래스가 여러 개인 경우 이렇게 작성하는 것은 약간 번거롭습니다. 따라서 객체 구문은 배열 구문에도 사용할 수 있습니다: 🎜rrreee🎜예: 🎜rrreee🎜🎜🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜위 내용은 v-bind가 클래스 속성을 동적으로 바인딩하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7442
15
1371
52
76
11
36
19
9
6
vue.js로 JS 파일을 참조하는 방법
Apr 07, 2025 pm 11:27 PM
vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
게으른 부하 vue의 의미는 무엇입니까?
Apr 07, 2025 pm 11:54 PM
vue.js에서 게으른 로딩을 사용하면 필요에 따라 부품 또는 리소스를 동적으로로드 할 수 있으므로 초기 페이지로드 시간을 줄이고 성능을 향상시킵니다. 특정 구현 방법에는 & lt; keep-alive & gt를 사용하는 것이 포함됩니다. & lt; 구성 요소는 & gt; 구성 요소. 게으른 하중은 FOUC (Splash Screen) 문제를 일으킬 수 있으며 불필요한 성능 오버 헤드를 피하기 위해 게으른 하중이 필요한 구성 요소에만 사용해야합니다.
Vue는 천막/텍스트 스크롤 효과를 인식합니다
Apr 07, 2025 pm 10:51 PM
CSS 애니메이션 또는 타사 라이브러리를 사용하여 VUE에서 Marquee/Text Scrolling Effects를 구현하십시오. 이 기사는 CSS 애니메이션 사용 방법을 소개합니다. & lt; div & gt; CSS 애니메이션을 정의하고 오버플로를 설정하십시오 : 숨겨진, 너비 및 애니메이션. 키 프레임을 정의하고 변환을 설정하십시오 : Translatex () 애니메이션의 시작과 끝에서. 지속 시간, 스크롤 속도 및 방향과 같은 애니메이션 속성을 조정하십시오.
Vue에서 시계를 사용하는 방법
Apr 07, 2025 pm 11:36 PM
vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.
Vue가 이전 페이지로 돌아 오는 방법
Apr 07, 2025 pm 11:30 PM
vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.
VUE 버전을 쿼리하는 방법
Apr 07, 2025 pm 11:24 PM
Vue DevTools를 사용하여 브라우저 콘솔에서 vue 탭을 보면 VUE 버전을 쿼리 할 수 있습니다. npm을 사용하여 "npm list -g vue"명령을 실행하십시오. package.json 파일의 "종속성"객체에서 vue 항목을 찾으십시오. Vue Cli 프로젝트의 경우 "vue -version"명령을 실행하십시오. & lt; script & gt에서 버전 정보를 확인하십시오. vue 파일을 나타내는 html 파일의 태그.
Vue Pagination 사용 방법
Apr 08, 2025 am 06:45 AM
Pagination은 큰 데이터 세트를 작은 페이지로 나누어 성능 및 사용자 경험을 향상시키는 기술입니다. VUE에서 다음 내장 방법을 페이징에 사용할 수 있습니다. 총 페이지 수를 계산하십시오 : TotalPages () Traversal 페이지 번호 : V-For Directive 현재 페이지를 설정하려면 : CurrentPage 현재 페이지 데이터 가져 오기 : currentPagedAta ()
