vue 動態(tài)樣式綁定 class/style的寫法小結
更新時間：2023年03月04日 10:27:59 作者：想搞技術
這篇文章主要介紹了vue 動態(tài)樣式綁定 class/style的寫法小結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
簡介：
綁定樣式：
1、class樣式
寫法：class="xxx" xxx可以是字符串，對象，數(shù)組。
字符串寫法適用于：類名不確定，要動態(tài)獲取。
對象寫法適用于：要綁定多個樣式，個數(shù)確定，名字確定，但不確定用不用。
數(shù)組寫法適用于：要綁定多個樣式，個數(shù)不確定，名字不確定。
2、style樣式
：style="{fonSize : xxx}"其中xxx是動態(tài)值，鍵值要用小駝峰命名法。
：style="[a,b]"其中a，b是樣式對象。
class樣式：
字符串寫法：類名不確定，要動態(tài)獲取
通過v-bind動態(tài)綁定樣式：
//樣式-----------------------------------------
<style>
.basic{
border: 5px solid rgb(77, 191, 252); //邊框
width: 400px; //寬
height: 100px; //高
}
.style1{
border: 5px solid rgb(75, 139, 235); //邊框
background-color: rgb(20, 117, 122); //背景顏色
color: bisque; //字體顏色
}
.style2{
border: 5px solid rgb(182, 219, 131); //邊框
background-color: rgb(222, 171, 203); //背景
color: rgb(16, 23, 29); //字體
border-radius: 10px; //圓角
}
.change1{
background: -webkit-linear-gradient(left,rgb(182, 219, 131),rgb(241, 137, 201)); //漸變背景
}
.change2{
font-size: larger; //大號字體
border-radius: 30px; //圓角
}
</style><div id="gjs">
<h1>字符串方法</h1>
<div class="basic" :class="style">
{{name}} <br>
<button @click="changeStyle">改變樣式</button>
</div>
<hr>
<h1>對象方法</h1>
<div class="basic" :class="styleObj">
{{name}}
<br>
<button @click="changeStyle1">改變樣式</button>
</div>
<hr>
<h1>數(shù)組方法</h1>
<div class="basic" :class="styleArr">
{{name}}
<br>
<button @click="changeStyle2">減少樣式</button>
<button @click="changeStyle3">增加樣式</button>
</div>
<h1>style方法1</h1>
<div class="basic" :style="{fontSize : fsize+'px'}">
{{name}}
</div>
<h1>style方法2</h1>
<div class="basic" :style="fontSize">
{{name}}
</div>
</div><body>
//v-bind簡寫 ： 將樣式style1綁定到div :class="style"-------------------------------------------
<div id="gjs" class="basic" :class="style">{{name}}</div>
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
//定義類名-可以通過綁定事件更改為其他類名更改樣式-----------------------------------
style: 'style1',
},
})
</script>
</body>
也可以添加按鈕綁定點擊事件改變參數(shù)，點擊按鈕將style的參數(shù)變?yōu)閟tyle2，通過添加判斷實現(xiàn)來回改變樣式
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
style: '',
},
methods: {
changeStyle(){
if (this.style == 'style2') {
this.style = 'style1'
} else {
this.style = 'style2'
}
}}對象寫法：要綁定多個樣式，個數(shù)確定，名字確定，但不確定用不用。
通過點擊按鈕或者控制臺修改對象屬性的值來控制樣式的變化
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
styleObj:{
change1:false,
change2:false,
}
},
methods: {
changeStyle1(){
if (this.styleObj.change1 == true) {
this.styleObj.change1 = false
this.styleObj.change2 = false
} else {
this.styleObj.change1 = true
this.styleObj.change2 = true
}
}
})
</script>數(shù)組寫法：要綁定多個樣式，個數(shù)不確定，名字不確定。
<script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
styleArr:['change1','change2'],
},
methods: {
changeStyle2(){
this.styleArr.shift()
},
changeStyle3(){
this.styleArr.unshift('change1')
}
}
})
</script>通過綁定事件對數(shù)組中的值進行修改，點擊減少則移除數(shù)組中的值，點擊添加則給數(shù)組中添加值來控制樣式的變化
所以背景顏色消失
style方法 （鍵值要用小駝峰命名法）
//
<h1>style方法1</h1>
<div class="basic" :style="{fontSize : fsize+'px'}"> //這里的fontSize小駝峰
{{name}}
</div>
<h1>style方法2</h1>
<div class="basic" :style="fontSize">
{{name}}
</div> <script>
const vm = new Vue({
el: '#gjs',
data:{
name: '搞技術',
fsize:40, //方法1
fontSize:{
fontSize:'40px',
}, //方法2這里的fontSize小駝峰
}
})
</script>
到此這篇關于vue 動態(tài)樣式綁定 class/style的寫法小結的文章就介紹到這了,更多相關vue 動態(tài)樣式綁定 class和style內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車的增加減少移除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
VUE v-for循環(huán)中每個item節(jié)點動態(tài)綁定不同函數(shù)的實例
今天小編就為大家分享一篇VUE v-for循環(huán)中每個item節(jié)點動態(tài)綁定不同函數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue單頁面應用打開新窗口顯示跳轉頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章介紹了使用vue-cli搭建腳手架的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
這篇文章主要介紹了pc端vue 滾動到底部翻頁效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
vue結合el-table實現(xiàn)表格行拖拽排序(基于sortablejs)
這篇文章主要介紹了vue結合el-table實現(xiàn)表格行拖拽排序(基于sortablejs),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了淺談針對Vue相同路由不同參數(shù)的刷新問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue使用pdf-lib實現(xiàn)為文件流添加水印并預覽
這篇文章主要為大家詳細介紹了Vue如何使用pdf-lib實現(xiàn)為文件流添加水印并預覽的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03
這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了實現(xiàn)vuex原理的示例，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-10-10