使用 Vue 綁定單個或多個 Class 名的執行個體代碼，vueclass

使用 Vue 綁定單個或多個 Class 名的執行個體代碼，vueclass

一、用 變數形式 綁定單個 Class 名

在 vue 中綁定單個 class 名還好說，直接寫就可以了

<template> <div id="app"> <!-- 因為是自訂屬性，所以要用到 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 綁定單個Class 名

二、用 數組形式 綁定多個 Class 名

比如我們想再給這個 div 加個陰影

在 style 中寫好樣式

.shadow{ box-shadow: 10px 10px 5px 0 #999;}

在 data 中繼續添加資料對象

<script>export default { name: 'app', data () { return { box: 'yellow', shadow:'shadow' } }}</script>

在標籤中以數組的形式綁定 Class 名

<template> <div id="app"> <div :class="[box,shadow]"></div> </div></template>

就 OK 了。

用 數組形式 綁定多個 Class 名

三、用 json 形式 綁定多個 Class 名

該方法方便用於當同時添加多個 Class 名時，在某種情況下判斷顯示哪種樣式

先寫好樣式

<style>.yellow{ width: 200px; height: 200px; background: #ff0;}.shadow{ box-shadow: 10px 10px 5px 0 #999;}</style>

在 data 中添加數字對象，用來做判斷

<script>export default { name: 'app', data () { return { show1:true, show2:false } }}</script>

以 json 的形式綁定到 class 中，通過布爾值改變 show1 與 show2 的值，來控制 div 的狀態

<template> <div id="app"> <div :class="{yellow:show1,shadow:show2}"></div> </div></template>

用 json 形式 綁定多個 Class

ps：vue解決跨域問題

改config/index.js檔案

proxyTable: {// 請求到 '/device' 下 的請求都會被代理到 target： http://debug.xxx.com 中'/v1/*': {target: 'https://api.tiaotiao5.com',secure: true, // 接受 運行在 https 上的服務changeOrigin: true}}

總結

以上所述是小編給大家介紹的使用 Vue 綁定單個或多個 Class 名的執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！