使用 Vue 綁定單個或多個 Class 名的實例代碼
更新時間：2018年01月08日 14:42:58 作者：劉飛_007 關注
這篇文章主要介紹了使用 Vue 綁定單個或多個 Class 名的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
一、用 變量形式 綁定單個 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 名
二、用 數(shù)組形式 綁定多個 Class 名
比如我們想再給這個 div 加個陰影
在 style 中寫好樣式
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
在 data 中繼續(xù)添加數(shù)據(jù)對象
<script>
export default {
name: 'app',
data () {
return {
box: 'yellow',
shadow:'shadow'
}
}
}
</script>
在標簽中以數(shù)組的形式綁定 Class 名
<template> <div id="app"> <div :class="[box,shadow]"></div> </div> </template>
就 OK 了。
用 數(shù)組形式 綁定多個 Class 名
三、用 json 形式 綁定多個 Class 名
該方法方便用于當同時添加多個 Class 名時，在某種情況下判斷顯示哪種樣式
先寫好樣式
<style>
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
在 data 中添加數(shù)字對象，用來做判斷
<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 形式 綁定多個 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 名的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了vue連接本地服務器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
本篇文章主要介紹了vue實現(xiàn)登陸登出的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
在本文章里小編給大家整理了關于Vue中this.$nextTick的作用及用法，有需要的朋友們可以跟著學習參考下。2020-02-02
下面小編就為大家分享一篇Vue的elementUI實現(xiàn)自定義主題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue 監(jiān)聽某個div垂直滾動條下拉到底部的方法
今天小編就為大家分享一篇vue 監(jiān)聽某個div垂直滾動條下拉到底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)
這篇文章主要介紹了uniapp和vue組件之間的傳值(父子傳值,兄弟傳值,跨級傳值,vuex)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue項目打包之后在本地運行的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3組合式API中setup()概念和reactive()函數(shù)的用法
這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件，我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11