低代码开发工具教你Vue双向数据绑定-阿里云开发者社区

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

2024-10-16 6

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 低代码开发工具教你Vue双向数据绑定

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