vue指令(代码部分三)

html 复制代码
<template>
	<view>
		<view @click="onClick">标题:{{title}}</view>
		<input type="text" v-model="title"/>
		----------------案例----------------
		<view class="out">
			<view class="row">
				<input class="border" type="text" placeholder="请输入姓名..." v-model="message.username">
			</view>
			<view class="row">
				<input class="border" type="text" placeholder="请输入联系人..." v-model="message.tel">
			</view>
			<view class="row">
				<textarea class="border" placeholder="请输入留言内容..." v-model="message.content"></textarea>
			</view>
			<view class="row">
				<button type="primary" @click="onSubmit">提交留言</button>
			</view>
		</view>
		{{message}}
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"uniapp",
				message:{
					username:"",
					tel:"",
					content:""
				}
			};
		},
		methods:{
			onClick(){
				this.title=Math.random()
			},
			onSubmit(){
				console.log(this.message)
			}
			
		}
		
	}
</script>

<style lang="scss">
.out{
	padding: 30rpx;
	.row{
		margin-bottom: 10rpx;
	}
	.border{
		border: 1px solid #eee;
		width: 100%;
		min-height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
}
</style>
相关推荐
前端西瓜哥6 分钟前
贝塞尔曲线算法:求贝塞尔曲线和直线的交点
前端·算法
又写了一天BUG7 分钟前
npm install安装缓慢及npm更换源
前端·npm·node.js
cc蒲公英20 分钟前
Vue2+vue-office/excel 实现在线加载Excel文件预览
前端·vue.js·excel
Java开发追求者21 分钟前
在CSS中换行word-break: break-word和 word-break: break-all区别
前端·css·word
好名字082125 分钟前
monorepo基础搭建教程(从0到1 pnpm+monorepo+vue)
前端·javascript
森叶28 分钟前
Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题
vue.js·electron·npm
pink大呲花33 分钟前
css鼠标常用样式
前端·css·计算机外设
Flying_Fish_roe33 分钟前
浏览器的内存回收机制&监控内存泄漏
java·前端·ecmascript·es6
c#上位机42 分钟前
C#事件的用法
java·javascript·c#
小小竹子1 小时前
前端vue-实现富文本组件
前端·vue.js·富文本