vue綁定class與行間樣式style詳解
更新時間：2017年08月16日 17:05:40 作者：ghostwu
這篇文章主要介紹了vue綁定class與行間樣式style的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、綁定class屬性的方式
1、通過數(shù)組的方式，為元素綁定多個class
<style>
.red {
color:red;
/*color:#ff8800;*/
}
.bg {
background: #000;
/*background: green;*/
}
</style>
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
red_color : 'red',
bg_color : 'bg'
}
});
}
<div id="box">
<span :class="[red_color,bg_color]">this is a test string</span>
</div>
上例為span 綁定2個class,通過設定red_color和bg_color的值，找到對應的class類名
2、通過控制class的true或者false，來使用對應的class類名, true: 使用該class, false: 不使用該class
<style>
.red {
color:red;
}
.bg {
background: #000;
}
</style>
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
}
});
}
<div id="box">
<span :class="{red:true,bg:true}">this is a test string</span>
</div>
3、這種方式，跟第二種差不多，只不過是把class的狀態(tài)true/false用變量來代替
<style>
.red {
color:red;
}
.bg {
background: #000;
}
</style>
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
r : true,
b : false
}
});
}
<div id="box">
<span :class="{red:r,bg:b}">this is a test string</span>
</div>
4、為class屬性綁定整個json對象
<style>
.red {
color:red;
}
.bg {
background: #000;
}
</style>
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
json : {
red : true,
bg : false
}
}
});
}
<div id="box">
<span :class="json">this is a test string</span>
</div>
二、綁定style行間樣式的多種方式
1、使用json格式，直接在行間寫
window.onload = function(){
var c = new Vue({
el : '#box',
});
}
<div id="box">
<span :style="{color:'red',background:'#000'}">this is a test string</span>
</div>
2、把data中的對象，作為數(shù)組的某一項，綁定到style
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
c : {
color : 'green'
}
}
});
}
<div id="box">
<span :style="[c]">this is a test string</span>
</div>
3、跟上面的方式差不多，只不過是為數(shù)組設置了多個對象
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
c : {
color : 'green'
},
b : {
background : '#ff8800'
}
}
});
}
<div id="box">
<span :style="[c,b]">this is a test string</span>
</div>
4、直接把data中的某個對象，綁定到style
window.onload = function(){
var c = new Vue({
el : '#box',
data : {
a : {
color:'yellow',
background : '#000'
}
}
});
}
<div id="box">
<span :style="a">this is a test string</span>
</div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Django+vue跨域問題解決的詳細步驟,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)超酷文字上下滾動動畫,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03
這篇文章主要為大家詳細介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
elementUi vue el-radio 監(jiān)聽選中變化的實例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vues中使用JavaScript實現(xiàn)路由跳轉的步驟詳解
在Vue應用中,利用Vue?Router進行頁面間的導航是一個常見需求,本篇博客將通過示例代碼詳細介紹如何在Vue組件中使用JavaScript實現(xiàn)路由跳轉,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了element中el-select的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue的全選組件封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue如何使用pdf.js實現(xiàn)在線查看pdf文件功能
PDF.js是一個開源的JavaScript庫,用于在網(wǎng)頁上渲染和顯示PDF文件,在Vue中使用PDF.js來預覽PDF文件是很常見的需求,這篇文章主要給大家介紹了關于vue如何使用pdf.js實現(xiàn)在線查看pdf文件功能的相關資料,需要的朋友可以參考下2024-03-03
下面小編就為大家?guī)硪黄猇ue.js項目模板搭建圖文教程。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09