小程序开发 关于条件渲染的问题

Question

小程序开发 如何在input框里接收用户输入的数据 并进行数据绑定 并在条件渲染下输出相对应的数据(在显示器输出 控制台输出不算的)
如用户随机输入0-3的数 并输出相对应的颜色

Answer 1

1. 在input框里接收用户输入的数据

使用 bindblur 绑定一个自定义的事件，如下。

<input class="weui-input" placeholder="请填写房间名称" bindblur="title" value="{{title}}" placeholder-class="weui-input__placeholder" />

在 js 文件中创建这个事件，这样就可以把用户试试输入的数据绑定到这个 title 变量。

// 数据双向绑定
title: function (e) {
    this.setData({
        title: e.detail.value
    })
},

您需要在 js 文件中定义接受的字段，字段定义的方式如下所示。

Page({
data: {
    title: "",
},
onLoad: function (options) {
},

最后在小程序的 wxml 中，双向绑定渲染出来即可

<view class="weui-form__text-area">
    <h2 class="weui-form__title">输入结果</h2>
    <view class="weui-form__desc">{{ title }}</view>
</view>

希望对您有帮助，谢谢！