render 渲染iview input框和checkbox多选框

最新推荐文章于 2026-05-08 15:35:28 发布

原创最新推荐文章于 2026-05-08 15:35:28 发布 · 1w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何使用JavaScript来渲染iView框架中的input输入框和checkbox多选框，并实现数据的双向绑定。通过示例代码展示了具体实现过程。

1.渲染input框实现数据双向绑定

js:

h("i-input", {
                              style: {
                                width: "300px",
                                autofocus: true,
                                display: "flex",
                                "margin-top": "10px"
                              },
                              props: {
                                placeholder: "請輸入分組名稱",
                                // 使用value绑定数据而不是'v-model'
                                value:this.group_input,
                                clearable:true,
                              },
                              on:{
                                  'on-blur':(val)=>{
                                      this.group_input=val.target.value,
                                      console.log(this.group_input,"yyyyyyyy")
                                  }
                              }
                            }),

2.渲染checkbox实现数据双向绑定

js:

 [
                                                h(
                                                  "checkbox-group",
                                                  {
                                                    props: {
                                                        value: this.checkboxValue
                                                      },
                                                      on:{
                                                          'on-change':(val)=>{
                                                              this.checkboxValue=val;
                                                              console.log(val,11)
                                                          }
                                                      }
                                                  },
                                                  [ 
                                                    h("checkbox", {
                                                      props: {
                                                        label: "人力總數"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      },
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "新進人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "流失人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "出勤"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "直接人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    }),
                                                    h("checkbox", {
                                                      props: {
                                                        label: "間接人力"
                                                      },
                                                      style: {
                                                        display: "flex"
                                                      }
                                                    })
                                                  ]
                                                )
                                              ]