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

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

使用 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>

希望对您有帮助，谢谢！

input 绑定changge事件先获取到输入的值。然后根据值再渲染

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