vuejs改變css的方法:1、使用「v-bind:class」或者「v-bind:style」指令修改css樣式;2、直接通過操作dom來對css樣式進行更改。
本文操作環境:Windows7系統、vue2.9.6版,DELL G3電腦。
vuejs怎麼改變css?
Vue.js中對css的操作(修改)具體方式詳解
使用v-bind:class或者v-bind:style或者直接通過操作dom來對其樣式進行更改;
1.v-bind:class || v-bind:style
其中v-bind是指令,: 後面的class 和style是引數,而class之後的指在vue的官方檔案裡被稱為'指令預期值'(這個不必深究,反正個人覺得初學知道他叫啥名有啥用就好了)同v-bind的大多數指令(部分特殊指令如V-for除外)一樣,除了可以繫結字串型別的變數外,還支援一個單一的js表示式,也就是說v-bind:class的'指令預期值'除了字串以外還可以是物件或者陣列(‘v-bind:'中的v-bind可省略)。
1.1:物件語法:
通過物件來繫結v-bind:class=「{'css類名':控制是否顯示(true or false)}」
<template> <p> <p class='mycolor' :class="{'colordisplay':display}"><span>1.1我的物件更改&&繫結test</span></p> </p> </template> <script> export default { name: 'mytest', data() { return { display: true } }, mounted() {}, computed: {}, methods:{} } </script> <style> .colordisplay { display: inline; background: red; border: 1px solid blue } </style>
如果display為true,那麼此時該部分的class就是 class="mycolor colordisplay",
通過設定display的值就可以控制colordisplay的顯示
如果要設定繫結多個class的話就和正常的物件鍵值對一樣中間用逗號隔開就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"
1.2:內聯樣式:
v-bind:style='mycolor'
template
<p :style='mypagestyle'><span>1.2我的樣式內聯更改&&繫結test</span></p>
data
mypagestyle:{color: 'yellow',background:"blue"},
1.3:陣列語法:
也可以通過陣列來繫結v-bind:style='[mycolor1,mycolor2]'
<p :style="[myarr,myarrtest]"><span>1.3我的陣列更改&&繫結test</span></p>
然後設定返回的資料為
myarr:{color: 'white'}, myarrtest:{background:'#000',display:'inline'},
2.計算屬性
也可以通過計算屬性計算(適用於較為複雜判斷)樣式
<p class='computed' :class='compuretu'>2.計算屬性判斷</p>
將計算屬性的返回值作為類名,通過判斷serd和slid的值來控制樣式的顯示與否
data() { return {serd:true,slid:true} }, computed: { compuretu: function() { return {compuretu: this.serd && this.slid} } }
設定樣式
.compuretu{color:white;background: red}
3.操作節點
由於vue本身是虛擬dom如果通過document來進行節點樣式更改的時候有可能會出現'style' is not definde的錯誤,
這個問題的解決方式就必須得對vue 的理解要求更高一層了,它可以通過在vue本身的週期mounted函數裡用ref和$refs 來獲取樣式,來完成對其樣式的更改:範例如下:
<template> <p> <p style=「color: green;」 ref="abc"><span>我的test</span></p> </p> </template> <script> export default { name: 'mytest', data() { return {} }, mounted() {console.log(this.$refs.abc.style.cssText)} } <script> <style> </style>
說明:
1.ref被用來給元素(子元件)註冊參照資訊;
2.vm.$refs 一個物件,持有已註冊過 ref 的所有子元件(或HTML元素);
使用:在 HTML元素 中,新增ref屬性,然後在JS中通過vm.$refs.屬性來獲取
上述會將style的內容全部輸出(color: green;)
這樣的話對其進行更改就可以對相應的屬性直接更改(this.$refs.abc.style.color=red
)
<template> <p> <p :class='{mycss}'><span>我的單個class屬性的test</span></p> <p class='mycolor' :class="{'colordisplay':display}"><span>1.1我的物件更改&&繫結test</span></p> <p :style='mypagestyle'><span>1.3我的樣式內聯更改&&繫結test</span></p> <p :style="[myarr,myarrtest]"><span>1.3我的陣列更改&&繫結test</span></p> <p class='computed' :class='compuretu'>2.計算屬性判斷</p> <p style="color: green;" ref="abc"><span>3.我的dom更改test</span></p> </p> </template> <script> export default { name: 'mytest', data() { return { serd:true, slid:true, mycss: { color: '' }, mypagestyle:{ color: 'yellow', background:"blue" }, myarr:{ color: 'white' }, myarrtest:{ background:'#000', display:'inline' }, display: true } }, mounted() { console.log(this.$refs.abc.style.cssText) this.$refs.abc.style.color = 'red' //修改屬性 this.$refs.abc.style.background = 'black' //新增屬性 this.$refs.abc.style.display = 'inline' console.log(111) console.log(this.$refs.abc.style.display) }, computed: { compuretu: function() { return { compuretu: this.serd && this.slid } } }, methods:{ } } </script> <style> .mycss { color: blue } .colordisplay { display: inline; background: red; border: 1px solid blue } .mycolor { color: orange } .computed { border: 1px solid yellow } .compuretu{ color:white; background: red; } </style>
當然最後這種方式對於初入門的朋友來講可能會有點理解不透,所以我更建議大家使用前幾種方式
推薦學習:《》
以上就是vuejs怎麼改變css的詳細內容,更多請關注TW511.COM其它相關文章!