使用 Vue 綁定單個(gè)或多個(gè) Class 名的實(shí)例代碼
一、用 變量形式 綁定單個(gè) Class 名
在 vue 中綁定單個(gè) class 名還好說，直接寫就可以了
<template>
<div id="app">
<!-- 因?yàn)槭亲远x屬性，所以要用到 v-bind ，簡(jiǎn)寫為 : -->
<!-- 3.將 box 綁定給 div -->
<div :class="box"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
// 2.在 data 中把 yellow 賦給 box
box: 'yellow'
}
}
}
</script>
<style>
/* 1.在樣式表中寫好樣式 */
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
</style>
用 Vue 綁定單個(gè)Class 名
二、用 數(shù)組形式 綁定多個(gè) Class 名
比如我們想再給這個(gè) div 加個(gè)陰影
在 style 中寫好樣式
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
在 data 中繼續(xù)添加數(shù)據(jù)對(duì)象
<script>
export default {
name: 'app',
data () {
return {
box: 'yellow',
shadow:'shadow'
}
}
}
</script>
在標(biāo)簽中以數(shù)組的形式綁定 Class 名
<template> <div id="app"> <div :class="[box,shadow]"></div> </div> </template>
就 OK 了。
用 數(shù)組形式 綁定多個(gè) Class 名
三、用 json 形式 綁定多個(gè) Class 名
該方法方便用于當(dāng)同時(shí)添加多個(gè) Class 名時(shí)，在某種情況下判斷顯示哪種樣式
先寫好樣式
<style>
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
在 data 中添加數(shù)字對(duì)象，用來做判斷
<script>
export default {
name: 'app',
data () {
return {
show1:true,
show2:false
}
}
}
</script>
以 json 的形式綁定到 class 中，通過布爾值改變 show1 與 show2 的值，來控制 div 的狀態(tài)
<template>
<div id="app">
<div :class="{yellow:show1,shadow:show2}"></div>
</div>
</template>
用 json 形式 綁定多個(gè) Class
ps：vue解決跨域問題
改config/index.js文件
proxyTable: {
// 請(qǐng)求到 '/device' 下 的請(qǐng)求都會(huì)被代理到 target： http://debug.xxx.com 中
'/v1/*': {
target: 'https://api.tiaotiao5.com',
secure: true, // 接受 運(yùn)行在 https 上的服務(wù)
changeOrigin: true
}
}
總結(jié)
以上所述是小編給大家介紹的使用 Vue 綁定單個(gè)或多個(gè) Class 名的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue連接本地服務(wù)器的實(shí)現(xiàn)示例
本文主要介紹了vue連接本地服務(wù)器的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
在本文章里小編給大家整理了關(guān)于Vue中this.$nextTick的作用及用法，有需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
Vue的elementUI實(shí)現(xiàn)自定義主題方法
下面小編就為大家分享一篇Vue的elementUI實(shí)現(xiàn)自定義主題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue 監(jiān)聽某個(gè)div垂直滾動(dòng)條下拉到底部的方法
今天小編就為大家分享一篇vue 監(jiān)聽某個(gè)div垂直滾動(dòng)條下拉到底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex)
這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級(jí)傳值,vuex)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue項(xiàng)目打包之后在本地運(yùn)行的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目打包之后在本地運(yùn)行的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個(gè)基本的使用方式，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11