So wählen Sie Stile in Uniapp aus und ändern sie

Mit der kontinuierlichen Entwicklung des mobilen Internets hat sich die Kluft zwischen nativen Anwendungen und Webanwendungen allmählich verringert. Ein plattformübergreifendes Entwicklungsframework namens Uniapp ist für viele Entwickler zum Werkzeug der Wahl geworden. In Uniapp können wir, ähnlich wie bei CSS-Stylesheets in der Webentwicklung, Stile verwenden, um die UI-Effekte von Komponenten während des Entwicklungsprozesses zu ändern. Normalerweise müssen wir den Stil einer Komponente basierend auf ihrem ausgewählten Status ändern In diesem Artikel stellen wir vor, wie Sie mit Uniapp den ausgewählten Stil ändern können.

1. Verwenden Sie v-bind, um Stile zu binden.

In Uniapp können wir v-bind verwenden, um bestimmte Attribute der Komponente wie Klasse, Stil usw. zu binden, sodass sich der Wert der gebundenen Variablen ändert. Auch der Stil der Komponente ändert sich entsprechend. Daher können wir die gebundenen Attributwerte entsprechend dem ausgewählten Status der Komponente dynamisch ändern und so den Effekt einer Auswahl und Änderung des Stils erzielen.

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

Im obigen Code verwenden wir v-bind:class, um das Klassenattribut der Ansichtskomponente zu binden und es an eine isSelected-Variable zu binden. Wenn isSelected „true“ ist, ändert sich der Klassenattributwert der Komponente in „selected“, wodurch sich der Stil der Komponente ändert. Wenn isSelected „false“ ist, kehrt sie in ihren ursprünglichen Zustand zurück.

Gleichzeitig haben wir auch ein Tap-Ereignis an die Ansichtskomponente gebunden. Wenn der Benutzer auf die Komponente klickt, wird die Methode toggleSelect ausgelöst, um Auswahl- und Abwahlvorgänge durchzuführen.

2. Verwenden Sie das berechnete Attribut

Zusätzlich zur Verwendung von v-bind zum Binden von Stilen können wir auch das von Uniapp bereitgestellte berechnete Attribut verwenden, um den Stil der Komponente dynamisch zu berechnen und den Effekt der Auswahl und Änderung des Stils zu erzielen. Das berechnete Attribut wird normalerweise verwendet, um einige Daten auf der Seite dynamisch zu generieren, wir können es aber auch für berechnete Stile verwenden.

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

Im obigen Code verwenden wir das berechnete Attribut, um den Stil der Ansichtskomponente zu berechnen. Wenn isSelected „true“ ist, gibt die boxStyle-Methode im berechneten Attribut ein Objekt zurück, das den ausgewählten Stil enthält; wenn isSelected „false“ ist, wird sie ein Objekt zurückgeben, das den ursprünglichen Stil enthält. Auf diese Weise können wir den Stil der Komponente in der berechneten Eigenschaft dynamisch berechnen und den Effekt erzielen, dass der Stil bei Auswahl geändert wird.

Fazit

In diesem Artikel wird hauptsächlich die Methode zur Verwendung von V-Bind und berechneten Attributen zum Auswählen und Ändern des Stils in Uniapp vorgestellt. Durch diese beiden Methoden können wir je nach Bedarf flexibel die geeignete Methode auswählen, um den Zweck der Stilauswahl und -änderung schnell zu erreichen.

Das obige ist der detaillierte Inhalt vonSo wählen Sie Stile in Uniapp aus und ändern sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!