Vue 框架之動(dòng)態(tài)綁定 css 樣式實(shí)例分析

更新時(shí)間：2018年11月14日 10:55:08 作者：肖朋偉

這篇文章主要介紹了Vue 框架之動(dòng)態(tài)綁定 css 樣式的方法，本文通過(guò)分享小實(shí)例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

今天的小實(shí)例是關(guān)于 Vue 框架動(dòng)態(tài)綁定 css 樣式，這也是非常常用的一個(gè)部分

首先說(shuō)一下動(dòng)態(tài)綁定，相對(duì)的大家都知道靜態(tài)綁定，靜態(tài)綁定的話，直接加 class=“”就可以了，使用 Vue 呢之前也介紹過(guò)一個(gè) v-bing:class="{{redClass:true}}" ，也可以實(shí)現(xiàn)綁定，但都不是動(dòng)態(tài)綁定，動(dòng)態(tài)綁定肯定是根據(jù)用戶(hù)的某個(gè)操作實(shí)現(xiàn)動(dòng)態(tài)的修改樣式

先看下面的第一個(gè)小實(shí)例：

在這里插入圖片描述

源代碼 html 文件：

請(qǐng)看注釋

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/xpwi</title>
 <!--引入自定義的樣式-->
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 <!--引入 vue 核心 js-->
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <!--vue-app 是根容器，定義一個(gè) id，然后在 js 里操作-->
 <div id="vue-app">
 <h2>動(dòng)態(tài)綁定 css 樣式</h2>
 <!--Vue 中綁定 class，使用的是 json 對(duì)象，類(lèi)名:布爾值
 然后我們可以通過(guò)修改 布爾值來(lái)實(shí)現(xiàn)修改樣式-->
 <h3 v-bind:class="{red:true}">實(shí)例1</h3>
 <h3>實(shí)例2</h3> 
 </div>
 <!--引入自己的 js，注意必須寫(xiě)在 body 標(biāo)簽里最后，因?yàn)楸仨毾燃虞d你的整個(gè) HTML DOM，才回去執(zhí)行 vue 實(shí)例-->
 <script type="text/javascript" src="js/computed.js" ></script>
 </body>
</html>

源代碼 css 文件：

.red{
 color: red;
}
.change{
 background-color: yellow;
}

第二個(gè)小實(shí)例：

實(shí)現(xiàn)，鼠標(biāo)放上去，修改背景色

在這里插入圖片描述

源代碼 html 文件：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/xpwi</title>
 <!--引入自定義的樣式-->
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 <!--引入 vue 核心 js-->
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <!--vue-app 是根容器，定義一個(gè) id，然后在 js 里操作-->
 <div id="vue-app">
 <h2>動(dòng)態(tài)綁定 css 樣式</h2>
 <!--Vue 中綁定 class，使用的是 json 對(duì)象，類(lèi)名:布爾值
 然后我們可以通過(guò)修改 布爾值來(lái)實(shí)現(xiàn)修改樣式-->
 <!--dataRed,dataChange是布爾值，定義在js 文件中-->
 <h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">實(shí)例1</h3>
 <h3>實(shí)例2</h3>
 </div>
 <!--引入自己的 js，注意必須寫(xiě)在 body 標(biāo)簽里最后，因?yàn)楸仨毾燃虞d你的整個(gè) HTML DOM，才回去執(zhí)行 vue 實(shí)例-->
 <script type="text/javascript" src="js/css.js" ></script>
 </body>
</html>

源代碼 js 文件：

//實(shí)例化 vue 對(duì)象
new Vue({
 //注意代碼格式
 //el：element 需要獲取的元素，一定是 html 中的根容器元素
 el:"#vue-app",
 data:{
 dataRed : true,
 dataChange : false
 },
 methods:{
 }
});

源代碼 css 文件：

.red{
 color: red;
}
.change{
 background-color: yellow;
}

上面的動(dòng)態(tài)，大家可以看到是通過(guò)修改樣式的打開(kāi)和關(guān)閉

實(shí)例二：

在這里插入圖片描述

源代碼 html 文件：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>VueLearn-cnblogs/xpwi</title>
 <!--引入自定義的樣式-->
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
 <!--引入 vue 核心 js-->
 <script type="text/javascript" src="js/vue.js" ></script>
 </head>
 <body>
 <!--vue-app 是根容器，定義一個(gè) id，然后在 js 里操作-->
 <div id="vue-app">
 <h2>動(dòng)態(tài)綁定 css 樣式</h2>
 <!--Vue 中綁定 class，使用的是 json 對(duì)象，類(lèi)名:布爾值
 然后我們可以通過(guò)修改 布爾值來(lái)實(shí)現(xiàn)修改樣式-->
 <!--dataRed,dataChange是布爾值，定義在js 文件中-->
 <h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">實(shí)例1</h3>
 <h3 v-on:mouseover="changeHeight=!changeHeight" v-on:mouseout="changeHeight=!changeHeight" v-bind:class="{yellowBG:true,changeHeight:changeHeight}">實(shí)例2</h3>
 </div>
 <!--引入自己的 js，注意必須寫(xiě)在 body 標(biāo)簽里最后，因?yàn)楸仨毾燃虞d你的整個(gè) HTML DOM，才回去執(zhí)行 vue 實(shí)例-->
 <script type="text/javascript" src="js/css.js" ></script>
 </body>
</html>

源代碼 js 文件：

//實(shí)例化 vue 對(duì)象
new Vue({
 //注意代碼格式
 //el：element 需要獲取的元素，一定是 html 中的根容器元素
 el:"#vue-app",
 data:{
 dataRed : true,
 dataChange : false,
 changeHeight : false
 },
 methods:{
 }
});

源代碼 css 文件：

.red{
 color: red;
}
.change{
 background-color: yellow;
}
.yellowBG{
 width: 20%;
 background-color: yellow;
}
.changeHeight{
 width: 20%;
 height:100px
}

總結(jié)

以上所述是小編給大家介紹的Vue 框架之動(dòng)態(tài)綁定 css 樣式實(shí)例分析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: