목차
공식 문서: 클래스 및 스타일 바인딩 - Vue.js(vuejs.org)
문자열 쓰기
문자열 쓰기 방식은 데이터의 인스턴스 값을 문자열로 사용하여 클래스를 채워 스타일을 변경하는 방식
이 방법은 가장 유연한
사용 시나리오: 스타일 유형이 불확실함
문자열 바인딩 클래스 스타일:
<div :class="myclass">你好</div>문자열은 vue 인스턴스 데이터의 기존 속성을 사용합니다.
예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="myclass1" >
你好,vue
</div>
<div :class="myclass2" >
你好,vue
</div>
<div :class="myclass3" >
你好,vue
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
myclass1:"daxie",
myclass2:"yanse",
myclass3:'daxie yanse'
}
},
});
</script>
</html>브라우저 출력
.
개체 쓰기
사용 시나리오: 스타일 및 클래스 이름의 수를 결정하고 부울을 통해 동적으로 표시
인라인 스타일로 작성된 개체
인라인 스타일을 바인딩하는 객체 방법:
<div :class="{类样式:boolean类型的变量}">你好</div>예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="{daxie:isDaxie,yanse:isYanse}" >
你好,对象
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
isDaxie:true,
isYanse:false
}
},
});
</script>
</html>브라우저 출력
.
콘솔을 통해 수정한 후 색상 스타일을 true로 수정
.
개체는 데이터에 기록됩니다.
개체는 데이터에 기록되고 바인딩됩니다.
<div :class="data中创建的对象名">你好</div>예
데이터의 객체 k 값은 css의 클래스 스타일 이름과 일치해야 하며 값 값은 아무렇게나 쓸 수 있지만 비워둘 수는 없습니다.클래스 스타일 이름과 일치하는 것이 가장 좋습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="classObject">
对象2-你好
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
classObject:{
daxie:"lfghfhfdfg",
yanse:""
}
}
},
});
</script>
</html>브라우저 출력
배열 쓰기
사용 시나리오: 바인딩할 스타일의 수가 불확실하고 클래스 이름도 불확실합니다.
인라인 쓰기
배열의 요소는 클래스 스타일에 해당합니다.
예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="[class1,class2]">
数组1-你好
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
class1:"daxie",
class2:"yanse"
}
},
});
</script>
</html>브라우저 출력
배열에 삼항 표현식 추가
예
스타일에 대문자를 바인딩할 수 있는지 여부는 isActive가 true인지 false인지에 따라 다릅니다.
<div :class="[isActive?daxie:'',yanse]">数组2-你好</div>데이터 쓰기
예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="classList">
数组2-你好
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
classList:["daxie","yanse"]
}
},
});
</script>
</html>브라우저 출력
요약하다
클래스 스타일을 바인딩하는 방법에는 여러 가지가 있지만 각 유형마다 장단점이 있으므로 사용 시나리오에 따라 사용해야 합니다.