低代码开发工具教你uniapp-Vue双向数据绑定。

vue数据绑定

在 uni-app 中，你可以使用 Vue 的数据绑定功能来更新页面上的数据。这通常通过 v-model（用于表单输入和应用状态之间的双向绑定）和 {{ }}（用于文本插值）来实现。

文本输入

拖动文本输入组件进设计区，把字段标识改为title，实现双向绑定title。大家根据自己的标识按需来改。

文本内容

拖动文本内容至设计区，绑定上方双向绑定标识title。

保存源码至本地

点击保存源码至本地也可在线查看源码即可看见源码。结合hbuilder开发工具运行起来即可实现文本内容实时显示输入框的内容。

优化样式

结合工具在线提供的样式，进行样式优化显示。设计完成样式后重新保存源码至本地会显示新的效果。

生成代码

<template>
	<view class="container container329152">
		<u-form-item class="diygw-col-24" label="标题" prop="title">
			<u-input :focus="titleFocus" placeholder="请输入提示信息" v-model="title"></u-input>
		</u-form-item>
		<text class="diygw-col-24 text-clz">
			{{ title }}
		</text>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				titleFocus: false,
				title: ''
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		methods: {
			async init() {},
			// 新增方法 自定义方法
			async testFunction(param) {
				let thiz = this;
				console.log(this.checkbox);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text-clz {
		margin-left: 30rpx;
		text-shadow: 1px 1px 2px #333;
		font-weight: bold;
		width: calc(100% - 30rpx - 30rpx) !important;
		font-size: 30rpx !important;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 30rpx;
	}
	.container329152 {
	}
</style>