學習vue.js中class與style綁定
更新時間：2016年12月03日 09:03:36 作者：1owrie
這篇文章主要和大家一起學習vue.js中class與style綁定操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
關于vue.js中class與style綁定的練習代碼，分享給大家，供大家參考：
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ù)綁定常見的需求是綁定class和內(nèi)聯(lián)樣式
v-bind 可以綁定屬性class -->
<!-- 這個表示如果isactive是true時 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ù)里的一個對象-->
<div id="app-3" v-bind:class="classObject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeClass, errorClass]">
lowrie
</div>
<!-- 關于vue組件會專門再學習 -->
<!-- v-bind綁定內(nèi)聯(lián)樣式與綁定class類似 數(shù)組 對象 -->
<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;
};
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中實現(xiàn)可編輯table及其中加入下拉選項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動鼠標滾輪切換頁面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了Vuex的使用及知識點筆記，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)簡單計時器應用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue遍歷中存在el-form之踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
監(jiān)聽element-ui table滾動事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了關于vant折疊面板默認展開問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家分享一篇解決VUEX兼容IE上的報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue利用vue meta info設置每個頁面的title與meta信息
這篇文章主要給大家介紹了關于vue如何利用vue meta info設置每個頁面的title與meta信息的相關資料,文中將實現(xiàn)的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時候，我們一般引入多個js或者其他文件，一般使用? require.context 來引入多個不同的文件，但是vite中是不支持 require的，他推出了一個功能用import.meta.glob來引入多個，單個的文件，下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11