Vue.js中用v-bind繫結class的注意事項
阿新 • • 發佈：2018-11-09
此處樣式class的名稱必須加上引號，否則會將其當做物件的屬性，從而使得初始化報錯。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue關於class的繫結學習</title>
<script src="./js/vue.min.js"></script>
</head>
<style>
.class-a {
color: #red;
}
.class-b {
text-decoration 補充：
感覺程式碼中的classObject有點像散列表，key是一個樣式class，而value是boolean型別的值。
從console中獲取和改變classObject物件中class-a值，見下圖：
用 變數形式 繫結單個 Class 名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue關於class的繫結學習</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :class="box"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
box: 'yellow'
}
}
})
</script>
</body>
</html>
<style type="text/css">
.yellow{
width: 200px;
height: 200px;
background: red;
}
</style>
用陣列形式繫結多個 Class 名，用[]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue關於class的繫結學習</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :class="[box,shadow]"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
box: 'yellow',
shadow:'shadow'
}
}
})
</script>
</body>
</html>
<style type="text/css">
.yellow{
width: 200px;
height: 200px;
background: red;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
用 json 形式 繫結多個 Class 名，用{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue關於class的繫結學習</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="app">
<div :class="{yellow:show1,shadow:show2}"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
show1:true,
show2:false,
}
}
})
</script>
</body>
</html>
<style type="text/css">
.yellow{
width: 200px;
height: 200px;
background: red;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
在Vue.js1.0.19陣列也可以使用物件語法, 用陣列形式繫結多個 Class 名，用[]同時用 json 形式 繫結多個 Class 名，用{}
<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class繫結</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">class繫結</div>
對於classA可以加引號和不加引號，如下程式碼可以測試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue關於class的繫結學習</title>
<script src="./js/vue.min.js"></script>
</head>
<style>
.class-a {
color: #FF0000;
}
.classB {
text-decoration: underline;
}
.classC{
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<div id="app">
<!-- 如下兩種繫結：加引號和不加引號，都可以 -->
<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class繫結1</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">class繫結2</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classA: 'class-a',
isB: true,
isC: true
}
});
</script>
</body>
</html>