Vue 框架-05-动态绑定 css 样式
生活随笔
收集整理的這篇文章主要介紹了
Vue 框架-05-动态绑定 css 样式
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Vue 框架-05-動(dòng)態(tài)綁定 css 樣式
今天的小實(shí)例是關(guān)于 Vue 框架動(dòng)態(tài)綁定 css 樣式，這也是非常常用的一個(gè)部分
首先說一下 動(dòng)態(tài)綁定，相對(duì)的大家都知道靜態(tài)綁定，靜態(tài)綁定的話，直接加 class=“”就可以了，使用 Vue 呢之前也介紹過一個(gè) v-bing:class="{{redClass:true}}" ，也可以實(shí)現(xiàn)綁定，但都不是動(dòng)態(tài)綁定，動(dòng)態(tài)綁定肯定是根據(jù)用戶的某個(gè)操作實(shí)現(xiàn)動(dòng)態(tài)的修改樣式
先看下面的第一個(gè)小實(shí)例：
源代碼 html 文件：
請(qǐng)看注釋
源代碼 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" /><!--引入 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ì)象，類名:布爾值然后我們可以通過修改 布爾值來實(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，注意必須寫在 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ān)閉
實(shí)例二：
源代碼 html 文件：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>VueLearn-cnblogs/xpwi</title><!--引入自定義的樣式--><link rel="stylesheet" href="css/style.css" /><!--引入 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ì)象，類名:布爾值然后我們可以通過修改 布爾值來實(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，注意必須寫在 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 }轉(zhuǎn)載于:https://www.cnblogs.com/xpwi/p/9955643.html
總結(jié)
以上是生活随笔為你收集整理的Vue 框架-05-动态绑定 css 样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到死人复活了有什么兆头周公解梦
- 下一篇： vue2中的keep-alive使用总结