【uni-app 怎么获取input里的数据,怎么修改input的placeholder样式】

uni-app 怎么获取input里的数据,怎么修改input的placeholder样式

1.写两个input标签,获取值变化,提示信息,提示样式

<template>
	<view>
		<comeBack text_name="日记本"></comeBack>
		
		<view class="input " >
			<input type="text" @blur="title" placeholder="日记标题" placeholder-class="col_c" maxlength="50"  class="mle20 wth90"/>
		</view>
		<view class="input">
			<textarea @blur="con" placeholder="日记内容" placeholder-class="col_c" class="mle20 wth90" />
		</view>
		<view class="mto30">
			<view class="fle_all btn" style="padding: 20rpx;" @tap="kee_btn">
				<text class="let3 fon4_cen">提交</text>
			</view>
		</view>
	</view>
</template>

2.获取值变化的内容存起来,在点击提交的时候就可以传过去啦

<script>
	import comeBack from "../../component/come-back/come-back.vue"
	export default {
		components:{
			comeBack
		},
		data() {
			return {
				diary:{
					title:'',
					con:''
				}
			}
		},
		methods: {
			kee_btn(){
				console.log(this.diary)
			},
			title(e) {
				this.diary.title = e.detail.value
			},
			con(e) {
				this.diary.con = e.detail.value
			},
		}
	}
</script>

<style>
	.input{
		 box-shadow:0px 0px 14px 2px rgba(183,198,222,0.7);
		 margin: 20rpx;
		 padding: 15rpx;
		 border-radius: 10rpx;
	}
	.btn{
		background-color: #FE9236;
		margin: 0% 3%;
		border-radius: 25rpx;
		color: white;
	}
	.col_c{
		color: #ccc;
	}
	.mle20{
		margin-left: 20rpx;
	}
	.wth90{
		width: 90%;
	}
	.fle_all{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

····博主标签的样式

猜你喜欢

转载自blog.csdn.net/TChildeSeven/article/details/107641907