使用 Vue 綁定單個或多個 Class 名的實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:22:04

使用 Vue 綁定單個或多個 Class 名的實例代碼

使用 Vue 綁定單個或多個 Class 名的實例代碼:一、用變量形式綁定單個 Class 名在 vue 中綁定單個 class 名還好說，直接寫就可以了 <template> <div id=app>  <!-- 3.將 box 綁定給 di

推薦度：

點擊下載本文 文檔為doc格式

導讀使用 Vue 綁定單個或多個 Class 名的實例代碼:一、用變量形式綁定單個 Class 名在 vue 中綁定單個 class 名還好說，直接寫就可以了 <template> <div id=app>  <!-- 3.將 box 綁定給 di

一、用變量形式綁定單個 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 名的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用 Vue 綁定單個或多個 Class 名的實例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用 VUE 多個

熱門焦點

使用 Vue 綁定單個或多個 Class 名的實例代碼

使用 Vue 綁定單個或多個 Class 名的實例代碼

使用 Vue 綁定單個或多個 Class 名的實例代碼

最新推薦

猜你喜歡

熱門推薦