Comment changer le CSS dans vuejs

Comment changer le css dans vuejs : 1. Utilisez la commande "v-bind:class" ou "v-bind:style" pour modifier le style css ; 2. Changez le style css directement en exploitant le dom.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment changer les CSS dans vuejs ?

Explication détaillée des méthodes spécifiques d'exploitation (modification) du CSS dans Vue.js

Utilisez v-bind: class ou v-bind:style ou utilisez directement le dom pour changer son style

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

où v-bind est l'instruction, :La classe et le style suivants sont des paramètres, et la référence après la classe est appelée la « valeur attendue de l'instruction » dans la documentation officielle de vue (Il n'est pas nécessaire d'entrer dans les détails à ce sujet. Quoi qu'il en soit, je pense qu'il est utile pour les débutants de connaître son nom.) C'est la même chose que la plupart des instructions de v-bind (à l'exception de certaines instructions spéciales telles que V-for ), sauf qu'il peut lier des variables de type chaîne. De plus, il prend également en charge une seule expression js, ce qui signifie que la « valeur attendue de l'instruction » de la classe v-bind : peut être un objet ou un tableau en plus d'une chaîne (v). -bind dans 'v-bind:' peut être omis).

1.1 : Syntaxe de l'objet :

Bind v-bind:class="{'css class name' : contrôle si l'affichage (vrai ou faux)}"

<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>

Si l'affichage est vrai, alors cette fois Une partie de la classe est class="mycolor colordisplay", Vous pouvez contrôler l'affichage de colordisplay en définissant la valeur d'affichage 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

Si vous souhaitez configurer la liaison de plusieurs classes, c'est la même chose qu'une valeur-clé d'objet normale paire. Séparez-les simplement par des virgules v-bind:class="{'colordisplay':display,'ispay':pay}"

1.2 : Style en ligne :

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 : Syntaxe du tableau : 🎜🎜Vous pouvez également lier via un tableau v-bind:style='[mycolor1,mycolor2] ' 🎜rrreee🎜 Définissez ensuite les données renvoyées sur 🎜rrreee🎜🎜2. Les propriétés calculées 🎜🎜🎜 peuvent également être calculées via des propriétés calculées (adaptées aux jugements plus complexes). Le style 🎜rrreee🎜 utilise la valeur de retour de la propriété calculée. en tant que nom de classe, contrôlez si le style est affiché ou non en jugeant les valeurs de serd et slide🎜rrreee🎜Définissez le style🎜🎜.compuretu{color:white;background: red}🎜 🎜🎜3. Manipuler le nœud🎜🎜 🎜Puisque vue elle-même est un dom virtuel, si vous modifiez le style du nœud via le document, l'erreur 'style' n'est pas défini peut se produire 🎜🎜La solution à ce problème doit nécessiter un niveau supérieur. niveau de compréhension de vue. , il peut changer son style en utilisant ref et $refs dans la fonction montée périodique de vue elle-même pour obtenir le style : l'exemple est le suivant : 🎜rrreee🎜Explication : 🎜🎜1.ref est utilisé pour donner des éléments (sous-composants) Enregistrez les informations de référence ; 🎜🎜2.vm.$refs est un objet qui contient tous les sous-composants (ou éléments HTML) qui ont une référence enregistrée 🎜🎜Utilisation : dans l'élément HTML, ajoutez l'attribut ref ; puis transmettez-le dans l'attribut JS vm.$refs. pour obtenir 🎜🎜Ce qui précède affichera tout le contenu du style (couleur : vert ;) 🎜🎜De cette façon, si vous le modifiez, vous pouvez directement modifier l'attribut correspondant. (this.$refs.abc .style.color=red)🎜rrreee🎜Bien sûr, la dernière méthode peut être un peu difficile à comprendre pour les débutants, je vous recommande donc d'utiliser les premières méthodes 🎜🎜Apprentissage recommandé : "🎜 tutoriel vue🎜》🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!