在關於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偽類選擇器等等。透過掌握這些技能，我們可以更靈活地調整我們的頁面樣式以滿足使用者需求。
以上是uniapp在方法函數中修改樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
