uniapp modifies style in method function

In the development of uniapp, we often need to dynamically modify the style of the page, and one of the common methods is to change the style in the method function. In this article we will describe how to implement this method.

Generally speaking, we can modify the style by using the built-in methods provided by uni-app in the function. For example, we can use uni.$refs in the function to get a certain component in the page. Then, we can dynamically modify the style through the component's properties, such as style and class.

Let us use a specific example to help you better understand this process. Suppose we have a login page for a small program, where the layout style of the page is as follows:

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

Let us assume that we now need to implement the following requirements: when the user submits the form, if an input box in the form is not filled in , you need to change the color of its bottom border to red. Specifically, we need to change the value of the placeholder attribute to unfilled and add the style border-bottom-color: red to the input box.

To achieve this requirement, we first need to use the uni.$refs method to obtain the input box component, and then we need to change the style of the component.

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

In the above code, we added the ref attribute to each input box component to obtain a reference to the component. In the login function, we determine whether the content of the input box is empty. If it is empty, we change the value of the placeholder attribute to Unfilled and add a style to the input box. border-bottom-color: red.

Note that we are using $refs. instead of refs., this is because in uni-app, $refs is A built-in object that can access all components with ref properties.

In short, through this article, we learned how to modify the style in the method function in uni-app. Of course, this is just one of the implementation methods, and there are many other methods, such as using the this.setData() method in a function to change the data state, using CSS pseudo-class selectors, and so on. By mastering these skills, we can be more flexible in adapting our page styles to meet user needs.

The above is the detailed content of uniapp modifies style in method function. For more information, please follow other related articles on the PHP Chinese website!