溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天的小實例是關于 Vue 框架動態綁定 css 樣式，這也是非常常用的一個部分
首先說一下 動態綁定，相對的大家都知道靜態綁定，靜態綁定的話，直接加 class=“”就可以了，使用 Vue 呢之前也介紹過一個 v-bing:class="{{redClass:true}}" ，也可以實現綁定，但都不是動態綁定，動態綁定肯定是根據用戶的某個操作實現動態的修改樣式
先看下面的第一個小實例：
源代碼 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 是根容器，定義一個 id，然后在 js 里操作-->
<div id="vue-app">
<h3>動態綁定 css 樣式</h3>
<!--Vue 中綁定 class，使用的是 json 對象，類名:布爾值
然后我們可以通過修改 布爾值來實現修改樣式-->
<h4 v-bind:class="{red:true}">實例1</h4>
<h4>實例2</h4>
</div>
<!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執行 vue 實例-->
<script type="text/javascript" src="js/computed.js" ></script>
</body>
</html>
源代碼 css 文件：
.red{
color: red;
}
.change{
background-color: yellow;
}
第二個小實例：
實現，鼠標放上去，修改背景色
源代碼 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 是根容器，定義一個 id，然后在 js 里操作-->
<div id="vue-app">
<h3>動態綁定 css 樣式</h3>
<!--Vue 中綁定 class，使用的是 json 對象，類名:布爾值
然后我們可以通過修改 布爾值來實現修改樣式-->
<!--dataRed,dataChange是布爾值，定義在js 文件中-->
<h4 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">實例1</h4>
<h4>實例2</h4>
</div>
<!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執行 vue 實例-->
<script type="text/javascript" src="js/css.js" ></script>
</body>
</html>
源代碼 js 文件：
//實例化 vue 對象
new Vue({
//注意代碼格式
//el：element 需要獲取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
dataRed : true,
dataChange : false
},
methods:{
}
});
源代碼 css 文件：
.red{
color: red;
}
.change{
background-color: yellow;
}
上面的動態，大家可以看到是通過修改樣式的 打開和關閉
實例二：
源代碼 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 是根容器，定義一個 id，然后在 js 里操作-->
<div id="vue-app">
<h3>動態綁定 css 樣式</h3>
<!--Vue 中綁定 class，使用的是 json 對象，類名:布爾值
然后我們可以通過修改 布爾值來實現修改樣式-->
<!--dataRed,dataChange是布爾值，定義在js 文件中-->
<h4 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">實例1</h4>
<h4 v-on:mouseover="changeHeight=!changeHeight" v-on:mouseout="changeHeight=!changeHeight" v-bind:class="{yellowBG:true,changeHeight:changeHeight}">實例2</h4>
</div>
<!--引入自己的 js，注意必須寫在 body 標簽里最后，因為必須先加載你的整個 HTML DOM，才回去執行 vue 實例-->
<script type="text/javascript" src="js/css.js" ></script>
</body>
</html>
源代碼 js 文件：
//實例化 vue 對象
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
}
總結
以上所述是小編給大家介紹的Vue 框架之動態綁定 css 樣式實例分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
