低代码开发工具教你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>
