RactiveJS用户输入表单实例演示

Ractive Demo, 修改控件中的输入值，Data中的数据马上实时变更。

ractive, form

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1628
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var ractive;

ractive = new Ractive({
        el: '#target',
        template: '<div class="row">\n  <div class="col-sm-6">\n    <h4>User Interface</h4>\n    <form>\n      <div class="form-group">\n        <label>Name</label>\n        <input type="text" value={{person.name}} class="form-control"/>  \n      </div>\n      <div class="form-group">\n        <label>Age</label>\n        <input type="number" value={{person.age}} class="form-control"/>  \n      </div>\n      <div class="form-group">\n        <label>Patronus</label>\n        <input type="text" value={{person.patronus}} class="form-control"/> \n      </div>\n    </form>\n  </div>\n  <div class="col-sm-6">\n    <h4>Data</h4>\n    <pre>{{JSON.stringify(person,null,2)}}</pre>\n  </div>\n</div>\n<hr>\n<p class="text-info">Change the data in the form on the left to see it update\nimmediately on the right.</p>',
        data: {
            person: {
                name: "Harry Potter",
                patronus: "Stag",
                age: 14
            }
        }
    });

}).call(this);

编译

CSS

HTML

Ractive Demo, 修改控件中的输入值，Data中的数据马上实时变更。

ractive, form

编辑器支持Emmet

快捷键

Ractive Demo, 修改控件中的输入值，Data中的数据马上实时变更。

ractive, form

GentleForm演示： 一款可访问用户友好的表单验证JS库

使用React、MobX和jQuery实现的支付表单模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

GentleForm演示：一款可访问用户友好的表单验证JS库