Comment sélectionner et modifier les styles dans Uniapp

Avec le développement continu de l'Internet mobile, l'écart entre les applications natives et les applications Web s'est progressivement réduit. Un cadre de développement multiplateforme appelé Uniapp a émergé et est devenu l'outil de choix pour de nombreux développeurs. Dans Uniapp, comme les feuilles de style CSS dans le développement Web, nous pouvons utiliser des styles pour modifier les effets d'interface utilisateur des composants pendant le processus de développement ; nous rencontrons généralement des situations où nous devons changer le style d'un composant en fonction de son état sélectionné. article Nous présenterons comment utiliser Uniapp pour modifier le style sélectionné.

1. Utilisez v-bind pour lier des styles

Dans Uniapp, nous pouvons utiliser v-bind pour lier certaines propriétés du composant, telles que la classe, le style, etc., de sorte que lorsque la valeur de la variable liée change, Le style du composant changera également en conséquence. Par conséquent, nous pouvons modifier dynamiquement la valeur de l'attribut lié du composant en fonction de son état sélectionné, obtenant ainsi l'effet de sélection et de modification du style.

<template>
  <view 
    :class="{selected: isSelected}"
    @tap="toggleSelect"
  >
    我是一个组件
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  methods: {
    toggleSelect() {
      this.isSelected = !this.isSelected
    }
  }
}
</script>
 
<style>
.selected {
  background-color: #00BFFF;
  color: #fff;
}
</style>

Dans le code ci-dessus, nous utilisons v-bind:class pour lier l'attribut de classe du composant de vue et le lier à une variable isSelected. Lorsque isSelected est vrai, la valeur de l'attribut de classe du composant devient « sélectionné », entraînant un changement de style du composant. Lorsque isSelected est faux, il revient à son état d'origine.

Dans le même temps, nous avons également lié un événement tap au composant view. Lorsque l'utilisateur clique sur le composant, la méthode toggleSelect sera déclenchée. Cette méthode inversera la valeur isSelected pour réaliser les opérations de sélection et de désélection.

2. Utilisez l'attribut calculé

En plus d'utiliser v-bind pour lier les styles, nous pouvons également utiliser l'attribut calculé fourni par Uniapp pour calculer dynamiquement le style du composant et obtenir l'effet de sélection et de modification du style. L'attribut calculé est généralement utilisé pour générer dynamiquement certaines données dans la page, mais nous pouvons également l'utiliser pour les styles calculés.

<template>
  <view 
    :style="boxStyle"
    @tap="toggleSelect"
  >
    我是一个组件
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  computed: {
    boxStyle() {
      if (this.isSelected) {
        return {
          backgroundColor: '#00BFFF',
          color: '#fff'
        }
      } else {
        return {
          backgroundColor: '#fff',
          color: '#000'
        }
      }
    }
  },
  methods: {
    toggleSelect() {
      this.isSelected = !this.isSelected
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons l'attribut calculé pour calculer le style du composant de vue. Lorsque isSelected est vrai, la méthode boxStyle dans l'attribut calculé renverra un objet contenant le style sélectionné ; lorsque isSelected est faux, elle renverra un objet contenant le style d'origine. De cette façon, nous pouvons calculer dynamiquement le style du composant dans la propriété calculée et obtenir l'effet de changer le style une fois sélectionné.

Conclusion

Cet article présente principalement la méthode d'utilisation de v-bind et des attributs calculés pour sélectionner et modifier le style dans Uniapp. Grâce à ces deux méthodes, nous pouvons choisir de manière flexible la méthode appropriée en fonction des besoins spécifiques, afin d'atteindre rapidement l'objectif de sélection et de changement de style.

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!