uniapp在输入框内放一个label
时间: 2024-09-21 22:03:31 浏览: 27
uniapp多选标签/多选按钮/多选框源码
5星 · 资源好评率100%
在UniApp中,要在输入框旁边添加标签,你可以使用WXML模板语言结合Vue.js的数据绑定特性。下面是一个简单的例子:
```html
<view class="input-with-label">
<text class="label">请输入内容:</text>
<input type="text" placeholder="在这里输入" v-model="inputValue" />
</view>
<script>
export default {
data() {
return {
inputValue: '',
};
},
}
</script>
<style scoped>
.input-with-label {
display: flex;
align-items: center;
}
.label {
margin-right: 10px; /* 可调整间距 */
}
</style>
```
在这个例子中,`<text>`标签作为label,显示文本“请输入内容”,`<input>`标签用于接收用户输入,`v-model`是Vue的数据绑定指令,它将输入框的值与`inputValue`数据属性关联起来。
阅读全文