uniapp modifie le style dans la fonction de méthode

Dans le développement d'uniapp, nous avons souvent besoin de modifier dynamiquement le style de la page, et l'une des méthodes courantes consiste à changer le style dans la fonction de méthode. Dans cet article, nous décrirons comment mettre en œuvre cette méthode.

De manière générale, nous pouvons modifier le style en utilisant les méthodes intégrées fournies par uni-app dans la fonction. Par exemple, nous pouvons utiliser uni.$refs dans une fonction pour obtenir un certain composant dans la page. Ensuite, nous pouvons modifier dynamiquement le style via les propriétés du composant, telles que style et class. uni.$refs，来获取页面中的某一个组件。然后，我们就可以通过组件的属性，比如style和class，来动态地修改样式。

下面让我们通过一个具体的示例来帮助大家更好地理解这个过程。假设我们有一个小程序的登录页面，其中页面的布局样式如下：

<template>
  <view>
    <form>
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      <button>登录</button>
    </form>
  </view>
</template>

<style scoped>
  form {
    width: 80%;
    margin: 10vw;
    padding: 5vw;
    background-color: #fff;
  }
  input {
    margin-bottom: 3vw;
    width: 100%;
    height: 10vw;
    border: 0;
    border-radius: 3vw;
    background-color: #f2f2f2;
  }
  button {
    width: 100%;
    height: 12vw;
    border: 0;
    border-radius: 3vw;
    color: #fff;
    background-color: #007aff;
    font-size: 4.5vw;
  }
</style>

让我们假设我们现在需要实现以下需求：当用户提交表单时，如果表单中的某个输入框没有填写，则需要将其底边框的颜色更改为红色。具体而言，我们需要将 placeholder 属性的值修改为 未填写，并为该输入框添加样式 border-bottom-color: red。

为实现该需求，我们首先需要使用 uni.$refs 方法来获取到该输入框组件，接下来我们需要改变该组件的样式。

<template>
  <view>
    <form>
      <input ref="username" type="text" placeholder="用户名" />
      <input ref="password" type="password" placeholder="密码" />
      <button @click="login">登录</button>
    </form>
  </view>
</template>

<script>
export default {
  methods: {
    login() {
      if (!this.$refs.username.value.trim()) {
        this.$refs.username.placeholder = '未填写'
        this.$refs.username.style.borderBottomColor = 'red'
      }

      if (!this.$refs.password.value.trim()) {
        this.$refs.password.placeholder = '未填写'
        this.$refs.password.style.borderBottomColor = 'red'
      }
    },
  },
}
</script>

在上面这段代码中，我们为每一个输入框组件添加了 ref 属性，用于获取到该组件的引用。我们在登录函数中判断了输入框的内容是否为空，如果为空，我们就将 placeholder 属性的值修改为 未填写，并为该输入框添加样式 border-bottom-color: red。

注意，我们使用的是$refs.而非refs.，这是因为在uni-app中，$refs是一个内置的对象，它可以访问到所有具有ref属性的组件。

总之，通过这篇文章，我们了解了在uni-app中如何在方法函数中修改样式的方法。当然，这只是其中的一种实现方式，还有很多其他的方法，如在函数中使用this.setData()

Utilisons un exemple spécifique pour vous aider à mieux comprendre ce processus. Supposons que nous ayons une page de connexion pour un petit programme, où le style de mise en page de la page est le suivant : 🎜rrreee🎜 Supposons que nous devons maintenant implémenter les exigences suivantes : lorsque l'utilisateur soumet le formulaire, si une zone de saisie dans le formulaire n'est pas rempli, vous devez La couleur de sa bordure inférieure passe au rouge. Plus précisément, nous devons changer la valeur de l'attribut placeholder en unfilled et ajouter un style à la zone de saisie border-bottom-color: red . 🎜🎜Pour répondre à cette exigence, nous devons d'abord utiliser la méthode uni.$refs pour obtenir le composant de la zone de saisie, puis nous devons changer le style du composant. 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté l'attribut ref à chaque composant de la zone de saisie pour obtenir une référence au composant. Dans la fonction de connexion, nous déterminons si le contenu de la zone de saisie est vide. S'il est vide, nous changeons la valeur de l'attribut placeholder en Non rempli et ajoutons dans la zone de saisie. Ajoutez le style border-bottom-color: red. 🎜🎜Notez que nous utilisons $refs. au lieu de refs. En effet, dans uni-app, $refs est un A construit. -in objet qui peut accéder à tous les composants avec l'attribut ref. 🎜🎜En bref, à travers cet article, nous avons appris comment modifier le style dans la fonction méthode dans uni-app. Bien sûr, ce n'est qu'une des méthodes d'implémentation, et il existe de nombreuses autres méthodes, comme l'utilisation de la méthode this.setData() dans une fonction pour changer l'état des données, en utilisant la pseudo-classe CSS. sélecteurs, etc. En maîtrisant ces compétences, nous pouvons être plus flexibles dans l'adaptation de nos styles de page pour répondre aux besoins des utilisateurs. 🎜

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!