微信小程序开发学习笔记——3.10【小案例】表单提交样式布局与model双向绑定

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接:3.10.【小案例】表单提交样式布局与model双向绑定_哔哩哔哩_bilibili

一、model简易双向绑定

简单双向绑定语法查阅:小程序框架 / 视图层 / 简易双向绑定 (qq.com)

如果使用 this.setData({ value: 'leaf' }) 来更新 value ,this.data.value 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变 this.data.value 。如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀:

<input model:value="{{value}}" />

二、代码

1、formKT.wxml

<view class="title">狂飙经典语录</view><view class="out"> <view class="list"><view class="row" wx:for="{{listArr}}" wx:key="id"> <!--for循环遍历数组listArr中的每个对象--><view class="text">{{index+1}}. {{item.title}}</view> <!--item就是listArr中的每一个对象,.title就是获取每个对象的title值--><view class="close"><icon type="clear" size="26"/></view></view></view><view class="count">共3条评论</view><view class="comment"><input type="text" placeholder="请输入评论内容..."placeholder-style="color:#aaa;font-size:28rpx"    model:value="{{iptValue}}"/>    <button size="mini" type="primary" disabled="{{!iptValue.length}}"    >发布</button></view>
</view>

input的通用属性查阅:表单组件 / input (qq.com)

        iptValue初始设置为空值,input组件的value值为输入框的内容,在前面加上一个model之后可以实现双向绑定,在js文件中通过 this.setData({ iptvalue: 'leaf' })能够改变输入框内文字的显示,同时输入框内输入其他内容也可以改变iptValue的值。

        故而button中根据iptvalue的长度来确定“发布”按钮什么时候可以点击,当输入框内没有输入内容时长度为,通过“!”取反,则为1,按钮不能点击,当输入框内有内容时长度非0,通过“!”取反,则为0,按钮能点击。

2、formKT.wxss

/* pages/formKT/formKT.wxss */
.title{font-size: 50rpx;text-align: center;color:#3c3c3c;padding:60rpx 0 30rpx;
}
.out{width: 690rpx;margin:30rpx;box-shadow: 0 15rpx 40rpx rgba(0,0,0,0.1);border-radius: 10rpx;padding:30rpx;box-sizing: border-box;
}
.out .list .row{padding:15rpx 0;border-bottom:1rpx solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 34rpx;color:#333;
}
.out .list .row .text{padding-right: 10rpx;box-sizing: border-box;
}
.out .count{padding:20rpx 0;font-size: 30rpx;color:#888;text-align:center;
}
.out .comment{display: flex;margin-top:20rpx;
}
.out .comment input{flex:4;background: #f4f4f4;margin-right: 10rpx;height: 100%; height: 64rpx;border-radius: 8rpx;padding:0 20rpx;color:#333;
}
.out .comment button{flex:1;
}

3、fromKT.js,将data部分改为如下代码

  data: {iptValue:"",listArr:[{id:123,title:"告诉老莫我要吃鱼"},{id:456,title:"咖啡不冲,迟早成功"},{id:789,title:"妻管严很幸福的哦"}]},

和3.11是同一个小案例 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/749893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ARM和AMD介绍

一、介绍 ARM 和 AMD 都是计算机领域中的知名公司&#xff0c;它们在不同方面具有重要的影响和地位。 ARM&#xff08;Advanced RISC Machine&#xff09;&#xff1a;ARM 公司是一家总部位于英国的公司&#xff0c;专注于设计低功耗、高性能的处理器架构。ARM 架构以其精简指…

如何在“Microsoft Visual Studio”中使用OpenCV编译应用程序

返回目录&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 前一篇&#xff1a;OpenCV4.9.0在windows系统下的安装 后一篇&#xff1a; 警告&#xff1a; 本教程可以包含过时的信息。 我在这里描述的所有内容都将适用于 OpenCV 的C\C接口。我首先假…

图像处理ASIC设计方法 笔记10 插值算法的流水线架构

&#xff08;一&#xff09; 三次插值算法实现的图像旋转设计的流水线架构 传统上&#xff0c;三次插值算法实现的图像旋转设计需要三块一样的处理资源&#xff0c;为了节约资源&#xff0c;采用流水线设计&#xff0c;简单来讲就是三次插值算法共用一块资源&#xff0c;优化这…

Hive Sql获取含有特殊字符key的json数据

hive表中json数据的key含有.符号&#xff0c;所以使用get_json_object(str,“$.key_1.key_2”)语法的时候就会获取到null。解法是通过json_to_map方法将json数据变成一个map结果&#xff0c;然后用key下标的方式获取值&#xff0c;代码 json_to_map(str)["key_1.key_2]

mysql报错日志查看

路径命令 在MySQL命令行客户端中&#xff0c;执行SHOW VARIABLES LIKE log_error;这个命令可以显示log_error系统变量的值&#xff0c;这个值通常指向MySQL的错误日志文件&#xff08;error log&#xff09;的路径。通过这个命令&#xff0c;你可以快速找到MySQL的报错日志文件…

数据结构的概念大合集02(线性表)

概念大合集02 1、线性表及其逻辑结构1.1 线性表的定义1.2 线性表的基本操作 2、线性表的顺序存储结构2.1 顺序表 3、线性表的链式存储3.1 链表3.1.1 头结点&#xff08;头指针&#xff09;&#xff0c;首指针&#xff0c;尾指针&#xff0c;尾结点3.1.2 单链表3.1.3 双链表3.1.…

软件供应链投毒 — NPM 恶意组件分析(二)

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01; 专栏供应链安全 数字化时代&#xff0c;软件无处不在。软件如同社会中的“虚拟人”&#xff0c;已经成为支撑社会正常运转的最基本元素之一&#xff0c;软件的安全性问题也正在成为当今社会的根本性、基础性问题。 随…

瑞熙贝通实验室安全培训考试系统

一、系统概述 瑞熙贝通实验室安全培训考试系统是一种基于互联网和人工智能技术的在线考试平台&#xff0c;旨在旨在提供实验室安全教育和考核的全面解决方案。该系统可以帮助实现实验室安全培训考试的在线化、智能化和规范化&#xff0c;提高实验室安全意识和能力&#xff0c;…

IntelliJ IDEA 面试题及答案整理,最新面试题

IntelliJ IDEA中的插件系统如何工作&#xff1f; IntelliJ IDEA的插件系统工作原理如下&#xff1a; 1、插件架构&#xff1a; IntelliJ IDEA通过插件架构扩展其功能&#xff0c;插件可以添加新的功能或修改现有功能。 2、安装和管理&#xff1a; 通过IDEA内置的插件市场下载…

【机器学习】1 机器学习概述

1.机器学习、人工智能、深度学习的关系 机器学习是人工智能的一个实现途径深度学习是机器学习的一个方法 2.人工智能的起点 1956年&#xff0c;达特茅斯会议&#xff0c;主题是&#xff1a;用机器来模仿人类学习以及他方面的智能。 3.人工智能的三大流派 符号主义学派:由心…

第二门课:改善深层神经网络<超参数调试、正则化及优化>-超参数调试、Batch正则化和程序框架

文章目录 1 调试处理2 为超参数选择合适的范围3 超参数调试的实践4 归一化网络的激活函数5 将Batch Norm拟合进神经网络6 Batch Norm为什么会奏效&#xff1f;7 测试时的Batch Norm8 SoftMax回归9 训练一个SoftMax分类器10 深度学习框架11 TensorFlow 1 调试处理 需要调试的参…

R语言深度学习-5-深度前馈神经网络

本教程参考《RDeepLearningEssential》 本篇我们将学习如何建立并训练深度预测模型。我们将关注深度前馈神经网络 5.1 深度前馈神经网络 我们还是使用之前提到的H2O包&#xff0c;详细可以见之前的博客&#xff1a;R语言深度学习-1-深度学习入门&#xff08;H2O包安装报错解决…

用 Visual Studio 调试器中查看内存中图像

返回目录&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 前一篇&#xff1a;OpenCV4.9.0在windows系统下的安装 后一篇&#xff1a; ​警告 本教程可以包含过时的信息。 Image Watch 是 Microsoft Visual Studio 的插件&#xff0c;可用于在调…

Webapi(.net6) 批量服务注册

如果不考虑第三方库&#xff0c;如Autofac这种进行服务注入&#xff0c;通过本身的.Core Weabpi实现的&#xff0c;总结了两种实现方法&#xff0c; 1.一种是参考abp框架里面的形式; 1.1 新建个生命周期的文件夹: 三个接口分别为: public interface IScopedDependency { }pu…

tomcat 实现会话绑定

Tomcat 后端服务器实现 Session ID会话保持 基础架构&#xff1a; 7-6 代理服务器nginx配置 7-3 tomcat 服务器 7-5 同理 测试&#xff1a; 此时刷新&#xff0c;会话ID一直在变&#xff0c;这样不好 如何解决呢&#xff1f; 不好的是确定ip之后&#xff0c;会一直在一台机上…

RISC-V 编译环境搭建:riscv-gnu-toolchain 和 riscv-tools

RISC-V 编译环境搭建&#xff1a;riscv-gnu-toolchain 和 riscv-tools 编译环境搭建以及说明 操作系统&#xff1a;什么系统都可以 虚拟机&#xff1a;VMmare Workstation Pro 17.50.x (版本不限) 编译环境&#xff1a;Ubuntu 18.04.5 CPU&#xff1a;i7-8750h(虚拟机分配4核…

JVM学习-JMM

目录 1.什么是JMM 2.JMM怎样保障数据的可见性、有序性、原子性 2.1保证原子性 2.2.保证可见性 2.3保证有序性 3.CAS 3.1乐观锁和悲观锁 3.2 CAS介绍 4.重量级锁的自旋优化 1.什么是JMM JMM即Java内存模型 &#xff0c;定义了一套在多线程读写共享数据&#xff08;如数组、成…

openssl3.2 - note - Writing OpenSSL Provider Skeleton

文章目录 openssl3.2 - note - Writing OpenSSL Provider Skeleton概述笔记测试工程的建立复现的provider工程总结Provider包含的头文件openssl/core.h中的数据结构实现 OSSL_provider_init()看一下openssl自带的提供者provider的openssl命令行测试provider的本质是hook了opens…

插入排序:一种简单而有效的排序算法

插入排序&#xff1a;一种简单而有效的排序算法 一、什么是插入排序&#xff1f;二、插入排序的步骤三、插入排序的C语言实现四、插入排序的性能分析五、插入排序的优化六、总结 在我们日常生活和工作中&#xff0c;排序是一种非常常见的操作。比如&#xff0c;我们可能需要对一…

【 c 语言 】指针入门

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&…