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