在关于uniapp的开发中，我们经常需要对页面的样式进行动态修改，而其中一种常见的做法就是在方法函数中改变样式。在这篇文章中，我们将介绍如何实现该方法。
通常来说，我们可以通过在函数中使用uni-app提供的内置方法进行样式修改。比如说，我们可以在函数中使用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()方法来改变数据状态、使用CSS伪类选择器等等。通过掌握这些技能，我们可以更加灵活地调整我们的页面样式以满足用户需求。
