v-bind가 클래스 속성을 동적으로 바인딩하는 방법에 대한 자세한 설명
- 青灯夜游앞으로
- 2022-08-10 14:05:552781검색
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 class="color">{{message}}</h2>
<!-- 第一种：直接用style中的样式，固定写死； -->
<h2 v-bind:class="color">{{message}}</h2>
<!-- 第二种：用指令v-bind,class的属性值color为变量； -->
<!-- vue解析，变量对应data中color属性值，则用了color的样式； -->
<h2 v-bind:class="{color:isColor, background:isBackground}">{{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 v-bind:class="classObject">{{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 v-bind:class="classObject">{{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" src="../js/vue.js"></script>
<style>
.active{
background-color: pink;
}
.line{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="getClasses()">方法methods：{{message}}</h2>
<h2 :class="classes">计算属性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 class="title" :class="['active','line']">{{message}}</h2> 클래스 이름은 해당 스타일, 즉 키는 클래스 추가 및 제거에 해당하며 값은 입니다. true 및 false
-
값이
true이면 키 스타일이 작동합니다 값이
false이면 키 스타일이 작동하지 않습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['active','line']">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="[active,line]">{{message}}</h2>
<h2 :class="getClasses()">方法methods：{{message}}</h2>
<h2 :class="classes">计算属性computed：{{message}}</h2>
</div>
<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>
</body>
</html><div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
v-bind:class 지시문은 일반 클래스 속성과 공존할 수도 있습니다. <p><pre class="brush:html;toolbar:false"><div v-bind:class="[{ active: isActive }, errorClass]"></div></pre><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/vue.js"></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></p>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제