materialuicheckbox怎么渲染

Material UI Checkbox是一个基于Material-UI的React组件，可以让开发者在React应用程序中使用Material Design风格的复选框。它使用MUI的Checkbox组件，它可以用于创建漂亮的，可定制的复选框。Material UI Checkbox的渲染过程非常简单，只需要在React应用程序中导入Material UI Checkbox，然后在需要使用的地方使用它。Material UI Checkbox的渲染可以通过指定复选框的属性，如标签，样式，颜色，大小等来定制。此外，Material UI Checkbox还支持在复选框上添加图标，以及在复选框上添加动画效果，以提高用户体验。

1、页面初始化时，通过扩展参数传值；mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；mui框架在如下几种场景下，会执行页面初始化 *** 作：-通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；-通过mui.init()方法创建子页面；-通过mui.init()方法预加载页面；-通过mui.preload()方法预加载页面示例，假设我们有如下需求：在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；

创建一个json文件，把假数据写出来

{

    "data":[

            {

                "id":1,

                "price":11000.00,

                "num":1,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/1.jpg"

            },

            {

                "id":2,

                "price":800.00,

                "num":2,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/2.jpg"

            },

            {

                "id":3,

                "price":990.00,

                "num":1,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/7.jpg"

            },

            {

                "id":4,

                "price":10.00,

                "num":5,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/8.jpg"

            },

            {

                "id":4,

                "price":12400.00,

                "num":3,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/9.jpg"

            }

        ]

}

引入文件模板引擎文件和jQuery文件，引在body标签后面就行了

在html页面写接受模板引擎和json数据的标签。

<div class="xyn_view">

            <!-- 订单列表 -->

            <div class="cart_order">

                <ul class="cart_ul">

                </ul>

            </div>

</div>

写模板引擎，在html页面写，记得给script标签加ID

<script type="text/html" id="mainTpl">

            <!-- //<![CDATA[ -->

            <!-- // 模板引擎 -->

            {{each data as value i}}

                <li>

                    <div class="cart_list">

                        <!-- mui复选框按钮 -->

                        <div class=" mui-checkbox cart_list_btn">

                            <label class="list_btn_label"></label>

                            <input name="checkbox1" value="Item 1" type="checkbox" />

                        </div>

                        <!-- 图片 -->

                        <div class="picture_wrap">

                            <img class="cart_list_picture" src="{{value.picture}}" alt="" />

                        </div>

                        <!-- 商品描述信息 -->

                        <div class="cart_list_content">

                            <span class="yichu_wrap"><span class="yichu">{{value.goods_name}}</span>

                            </span>

                            <ul class="list_content_price">

                                <span class="priceL">￥{{value.price}}.00</span>

                                <!-- 商品数量增加 -->

                                <div class="mui-numbox">

                                    <!-- "-"按钮，点击可减小当前数值 -->

                                    <button class="mui-btn mui-numbox-btn-minus xyn_minus" type="button">-</button>

                                    <input class="mui-numbox-input xyn_num" type="number" value="{{value.num}}"/>

                                    <!-- "+"按钮，点击可增大当前数值 -->

                                    <button class="mui-btn mui-numbox-btn-plus xyn_plus" type="button">+</button>

                                </div>

                            </ul>

                        </div>

                    </div>

                </li>

            {{/each}}

            <!-- //]]>-->

        </script>

连接json文件，并把json文件里面的内容赋值到html页面。接受json数据的标签在第三步里，我这里用ul来接收。第五步写在js文件中，也可以写在html页面的script标签中

$(function() {

                  $.ajax({

                      type: 'get',

                      url: './cart.json',   

                      dataType: 'json',

                      success: function(data) {

                          console.log(data)

                            var html = template('mainTpl', data)

                            $('.cart_ul').html(html)

                        },

                        error: function(data) {

                            console.dir(data)

                            $("#info").html("服务器发生错误")

                        }

                    })

            })

---