在uni-app中,你可以通过更改按钮的button
组件的text
属性来实现按钮文字的变化。下面是示例代码:
<template>
<view>
<button @click="handleClick" type="primary">{{ buttonText }}</button>
</view>
</template>
<script>
export default {
data() {
return {
buttonText: '点击按钮'
}
},
methods: {
handleClick() {
// 按钮点击事件处理函数
this.buttonText = '已点击'
}
}
}
</script>
在上述代码中,我们通过在data
中定义一个名为buttonText
的变量来存储按钮的文字内容。当按钮被点击时,我们在handleClick
方法中将buttonText
的值修改为'已点击'。这样,按钮的文字就会在点击后自动变成'已点击'。
在模板部分,我们使用了<button>
组件来展示按钮,并通过设置type
属性为primary
来设置按钮的样式。按钮的text
属性绑定为buttonText
变量,这样按钮的文字内容会随着buttonText
的值的改变而更新显示。
你可以根据需要调整按钮的样式和点击后的文字内容。