一、用 變量形式 綁定單個(gè) Class 名
在 vue 中綁定單個(gè) class 名還好說，直接寫就可以了
<template> <div id="app"> <!-- 因?yàn)槭亲远x屬性，所以要用到 v-bind ，簡寫為 : --> <!-- 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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
