So ändern Sie CSS in VueJS

So ändern Sie CSS in VueJS: 1. Verwenden Sie den Befehl „v-bind:class“ oder „v-bind:style“, um den CSS-Stil zu ändern. 2. Ändern Sie den CSS-Stil direkt, indem Sie den Dom bedienen.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Wie ändere ich CSS in VueJS?

Detaillierte Erläuterung der spezifischen Methoden zum Bedienen (Ändern) von CSS in Vue.js

Verwenden Sie v-bind: class oder v-bind:style oder bedienen Sie den Dom direkt, um seinen Stil zu ändern

1. v-bind:class ||. v-bind:style

wobei v-bind die Anweisung ist: Die folgende Klasse und der folgende Stil sind Parameter, und die Referenz nach der Klasse wird in der offiziellen Dokumentation von als „erwarteter Anweisungswert“ bezeichnet vue (Es besteht keine Notwendigkeit, näher darauf einzugehen. Ich denke jedenfalls, dass es für Anfänger nützlich ist, seinen Namen zu kennen.) Es ist dasselbe wie die meisten Anweisungen von v-bind (mit Ausnahme einiger spezieller Anweisungen wie V-for ), außer dass es Variablen vom Typ String binden kann. Darüber hinaus unterstützt es auch einen einzelnen js-Ausdruck, was bedeutet, dass der „Anweisungserwartungswert“ von v-bind: class zusätzlich zu einem String (v -bind in 'v-bind:' kann weggelassen werden).

1.1: Objektsyntax:

Binden Sie durch Objekte v-bind:class="{'CSS-Klassenname': Steuern Sie, ob angezeigt werden soll (wahr oder falsch)}"

<template>
 <p>
 <p class=&#39;mycolor&#39; :class="{&#39;colordisplay&#39;:display}"><span>1.1我的对象更改&&绑定test</span></p>
 </p>
</template>
<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 display: true
 }
 },
 mounted() {},
 computed: {},
 methods:{}
 }
</script>
<style>
 .colordisplay {
 display: inline;
 background: red;
 border: 1px solid blue
 }
</style>

Wenn die Anzeige wahr ist, dann dieses Mal Teil von Die Klasse ist class="mycolor colordisplay", Sie können die Anzeige von colordisplay steuern, indem Sie den Anzeigewert festlegen class="mycolor colordisplay",通过设置display的值就可以控制colordisplay的显示

如果要设置绑定多个class的话就和正常的对象键值对一样中间用逗号隔开就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"

1.2:内联样式：

v-bind:style='mycolor'

template

<p :style=&#39;mypagestyle&#39;><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=&#39;computed&#39; :class=&#39;compuretu&#39;>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: &#39;mytest&#39;,
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

Wenn Sie die Bindung mehrerer Klassen einrichten möchten, ist dies dasselbe wie ein normaler Objektschlüssel -Wert-Paar. Trennen Sie sie einfach durch Kommas v-bind:class="{'colordisplay':display,'ispay':pay}"

1.2: Inline-Stil:

v - bind:style='mycolor'

template🎜

<script>
 export default {
 name: &#39;mytest&#39;,
 data() {
 return {
 serd:true,
 slid:true,
 mycss: {
  color: &#39;&#39;
 },
 mypagestyle:{
  color: &#39;yellow&#39;,
  background:"blue"
 },
 myarr:{
  color: &#39;white&#39;
 },
 myarrtest:{
  background:&#39;#000&#39;,
  display:&#39;inline&#39;
 },
 display: true
 }
 },
 mounted() {　　
 console.log(this.$refs.abc.style.cssText)
 this.$refs.abc.style.color = &#39;red&#39; //修改属性
 this.$refs.abc.style.background = &#39;black&#39; //新增属性
 this.$refs.abc.style.display = &#39;inline&#39; 
 console.log(111)　
 console.log(this.$refs.abc.style.display)　
 },
 computed: {
 compuretu: function() {
 return {
  compuretu: this.serd && this.slid
 }
 }
 },
 methods:{
 
 }
 }
</script>

🎜data🎜rrreee🎜1.3: Array-Syntax: 🎜🎜Sie können auch über ein Array binden v-bind:style='[mycolor1,mycolor2 ] '🎜rrreee🎜 Dann setzen Sie die zurückgegebenen Daten auf 🎜rrreee🎜🎜2. Berechnete Eigenschaften 🎜🎜🎜 können auch über berechnete Eigenschaften berechnet werden (geeignet für komplexere Beurteilungen). Der Stil 🎜rrreee🎜 verwendet den Rückgabewert von Berechnete Eigenschaft als Klassenname. Steuern Sie, ob der Stil angezeigt wird oder nicht, indem Sie die Werte von serd und slide beurteilen >🎜🎜🎜3. Manipulieren Sie den Knoten🎜🎜 🎜Da Vue selbst ein virtueller Dom ist, kann der Fehler „Stil ist nicht definiert“ auftreten. 🎜🎜Die Lösung dieses Problems muss erforderlich sein Um ein höheres Verständnis von Vue zu erlangen, kann es seinen Stil ändern, indem es ref und $refs in der periodischen Mount-Funktion von Vue selbst verwendet, um den Stil zu erhalten: Das Beispiel lautet wie folgt: 🎜rrreee🎜Erklärung: 🎜🎜1.ref ist wird verwendet, um Elementen (Unterkomponenten) Referenzinformationen zu geben; 🎜🎜2.vm.$refs ist ein Objekt, das alle Unterkomponenten (oder HTML-Elemente) enthält, die registrierte Referenzen haben; Attribut und übergeben Sie es dann in JS vm.$refs. Attribut, um 🎜🎜Oben wird der gesamte Inhalt des Stils ausgegeben (Farbe: grün;) 🎜🎜Auf diese Weise können Sie das direkt ändern, wenn Sie es ändern entsprechendes Attribut (this.$refs.abc .style.color=red)🎜rrreee🎜Natürlich ist die letzte Methode für Anfänger möglicherweise etwas schwer zu verstehen, daher empfehle ich Ihnen, die erste zu verwenden einige Methoden🎜🎜Empfohlenes Lernen: „🎜 Vue-Tutorial🎜》🎜

Das obige ist der detaillierte Inhalt vonSo ändern Sie CSS in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!