溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue.js中Class與Style綁定的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
對于數據綁定，一個常見的需求是操作元素的class列表和它的內聯樣式。因為它們都是attribute，我們可以用v-bind處理它們；只需要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在v-bind用于class和style時，Vue.js專門增強了它。表達式的結果類型除了字符串以外，還可以是對象或數組。
我們可以傳給v-bind:class一個對象，以動態地切換class。注意，v-bind:class指令可以與普通的class特性共存。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="example" class="static" :class=" {'didi-orange': isRipe,'didi-green': isNotRipe}"></div> </body> <script> new Vue({ el: '#example', data: { isRipe: true, isNotRipe: false } }) </script> </html>
當isRipe和isNotRipe變化時，class列表將相應地更新。例如，如果isNotRipe變為true，那么class列表將變為“static didi-orange didi-green”。
注：盡管可以用Mustache標簽綁定class，比如class="{{className}}"，但是我們不推薦這種寫法和v-bind:class混用。
我們也可以直接綁定數據中的一個對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example" :class="ddfe"></div>
</body>
<script>
new Vue({
el: '#example',
data: {
ddfe: {
isRipe: true,
isNotRipe: false
}
}
})
</script>
</html>
還可以在這里綁定一個返回對象的計算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example" :class="ddfe"></div>
</body>
<script>
new Vue({
el: '#example',
data: {
didiAge: 4,
didiMember: 6000
},
computed: {
ddfe: function () {
return {
'didi-orange': this.didiAge > 3,
'didi-large': this.didiMember > 1000
}
}
}
})
</script>
</html>
我們可以把一個數組傳給v-bind:class，以應用一個class列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example" :class="[didiHandsome,didiBeautful]"></div>
</body>
<script>
new Vue({
el: '#example',
data: {
didiHandsome: 'didiHandsome',
didiBeautful: 'didiBeautful'
}
})
</script>
</html>
v-bind:style的對象語法十分直觀——看著非常像CSS，其實它是一個JavaScript對象。CSS屬性名可以用駝峰式或短橫分隔命名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example" :></div>
</body>
<script>
new Vue({
el: '#example',
data: {
didiColor: 'orange',
fontSize: 30
}
})
</script>
</html>
通常直接綁定到一個樣式對象更好，讓模板更清晰。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example" :></div>
</body>
<script>
new Vue({
el: '#example',
data: {
ddfe: {
color: 'orange',
fontSize: '13px'
}
}
})
</script>
</html>
同樣的，對象語法常常結合返回對象的計算屬性使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example" :></div>
</body>
<script>
new Vue({
el: '#example',
data: {
didiAge: 4,
didiMember: 6000
},
computed: {
ddfe: function () {
return {
color: this.didiAge>3 ? 'orange': 'green',
fontSize: this.didiMember>1000 ? '20px': '10px'
}
}
}
})
</script>
</html>
v-bind:style的數組語法可以將多個樣式對象應用到一個元素上。
<div id="example" :></div>
當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS property 時，如 transform，Vue.js 會自動偵測并添加相應的前綴。
主流瀏覽器引擎前綴:
webkit（谷歌，Safari，新版Opera瀏覽器，以及幾乎所有iOS系統中的瀏覽器（包括 iOS 系統中的火狐瀏覽器）；基本上所有基于WebKit 內核的瀏覽器）
moz（火狐瀏覽器）
o（舊版Opera瀏覽器）
ms（IE瀏覽器 和 Edge瀏覽器）
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue.js中Class與Style綁定的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
