Vue.js中用v-bind綁定class的注意事項
- 高洛峰原創
- 2017-01-12 13:31:361779瀏覽
前言
在Vue.js版本：1.0.27，使用Vue.js中V-bind指令來綁定class和style時，Vue.js對其進行了增強。表達式結果出了字串之外，還可以是物件或陣列。
這裡自己對其進行了測試，發現有一下的問題：
如果使用物件語法對class進行綁定話，class名稱必須加上引號，代表所對應的樣式，否則會將其當做對象的屬性，從而使得初始化報錯。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script>
<style>
.static {
font-size: 120px;
width: 600px;
margin: 0 auto;
background-color: yellow;
height: 120px;
line-height: 120px;
text-align: center;
}
.class-a {
color: #FF0000;
}
.class-b {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject">
关于class的绑定
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classObject: {
//'class-a',不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成'class-a',用引号括起来。
//否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。
'class-a':false,
'class-b': true
}
}
});
</script>
</body>
</html>參考資料：
Vue.js官網----http://cn.vuejs.org/guide/class-and-style.html
補充：
在這裡，自己感覺代碼中的classObject有點像是散列列表，key是一個樣式class，而value是boolean類型的值。
從console中取得並改變classObject物件中class-a值，見下圖：
看到console中操作，讓我覺得對於classObject確實有點像散列表類型。為了證實這個，可以去看看原始碼（ps：自己沒看）。
在Vue.js1.0.19，作者為其添加了一些語法，在數組也可以使用物件語法：
class綁定
class綁定
上面，對於classA可以加引號和不加引號，下面是自己的測試程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script>
<style>
.static {
font-size: 120px;
width: 600px;
margin: 0 auto;
background-color: yellow;
height: 120px;
line-height: 120px;
text-align: center;
}
.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绑定</div>
<div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classA: 'class-a',
isB: true,
isC: true
}
});
</script>
</body>
</html>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或工作能帶來一定的幫助，如果有疑問大家可以留言交流。
更多Vue.js中用v-bind綁定class的注意事項相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn