クラスのリストと、インラインスタイルの操作要素はデータバインディングの一般的な需要があります。ただ発現を介してつながることができ、文字列を把握する必要があります：彼らは財産ですので、我々は、V-バインドでそれらに対処することができますので。しかし、文字列の連結は、面倒でエラーが発生しやすいです。そのため、V-バインドは、クラスとスタイルのために、Vue.jsは特別な機能強化を行うとき。文字列型の式の結果に加えて、それは、オブジェクトまたは配列であってもよいです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>动态CSS Class</h1>
<h2>示例1</h2>
<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
<span>Herry</span>
</div>
<button v-on:click="changeColor= !changeColor">change Color</button>
<button v-on:click="changeLength = !changeLength">changeLength</button>
<h2>示例2</h2>
<div v-bind:class="compClass">
<span>Herry</span>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>app.js
new Vue({
el: '#app',
data: {
changeColor: false,
changeLength: false
},
methods: {
},
computed: {
compClass: function() {
return {
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
}
});style.cssに
span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background-color: green;
}
.changeLength span:after {
content: "length";
margin-left: 10px;
}