學(xué)習(xí)vue.js中class與style綁定
更新時(shí)間：2016年12月03日 09:03:36 作者：1owrie
這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
關(guān)于vue.js中class與style綁定的練習(xí)代碼，分享給大家，供大家參考：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs中Class與Style 綁定</title>
<link rel="stylesheet" href="css/vuetext.css">
</head>
<body>
<!-- 數(shù)據(jù)綁定常見(jiàn)的需求是綁定class和內(nèi)聯(lián)樣式
v-bind 可以綁定屬性class -->
<!-- 這個(gè)表示如果isactive是true時(shí) class就與active綁定 -->
<div id="app-1" v-bind:class="{ active: isActive }">
猴猴呀
</div>
<!-- 還可以綁定靜態(tài)樣式-->
<div id="app-2" class="static" v-bind:class="{ active: isActive }">
lowrie
</div>
<!-- 還可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象-->
<div id="app-3" v-bind:class="classObject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeClass, errorClass]">
lowrie
</div>
<!-- 關(guān)于vue組件會(huì)專(zhuān)門(mén)再學(xué)習(xí) -->
<!-- v-bind綁定內(nèi)聯(lián)樣式與綁定class類(lèi)似 數(shù)組 對(duì)象 -->
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
js:
var app = new Vue({
el: '#app-1',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app3=new Vue({
el:'#app-3',
data: {
classObject: {
active: true,
}
}
});
var app4=new Vue({
el:'#app-4',
data:{
activeClass: 'active',
errorClass: 'text-danger'
}
});
css:
.active{
color: #FFA07A;
};
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
Effect幾乎是Vue3.0中最重要的一個(gè)功能了,計(jì)算屬性監(jiān)聽(tīng)函數(shù)都是基于effect實(shí)現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3中effect函數(shù)到底是什么的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法
這篇文章主要介紹了用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)
本文主要介紹了Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue實(shí)現(xiàn)公告欄文字上下滾動(dòng)效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)公告欄文字上下滾動(dòng)效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用的案例詳解
這篇文章主要介紹了在Vue+Ts+Vite項(xiàng)目中配置別名指向不同的目錄并引用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于使用vue3+ts打開(kāi)echarts的正確方式,在Vue3中使用ECharts組件可以方便地創(chuàng)建各種數(shù)據(jù)可視化圖表,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12