uav

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/uav.min.js"></script>
<div id="app"></div>

CSS

label {
    width: 75px;
    display: inline-block;
    text-align: right;
}

JavaScript

const component = uav.component(`
<form>
    <h3>Two way binding demo</h3>
    <p>Value: <strong>{value}</strong></p>
    <p><label>text:</label> <input type="text" u-bind="value"></p>
    <p><label>password:</label> <input type="password" u-bind="value"></p>
    <p><label>textarea:</label> <textarea u-bind="value"></textarea></p>
    <p><label>select:</label>
        <select u-bind="value">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </p>
    <p><label>radio:</label>
        <input type="radio" value="1" u-bind="value"> 1 
        <input type="radio" value="2" u-bind="value"> 2 
        <input type="radio" value="3" u-bind="value"> 3 
        <input type="radio" value="4" u-bind="value"> 4 
        <input type="radio" value="5" u-bind="value"> 5 
    </p>
    <p><label>submit:</label> <input type="submit" u-bind="value"></p>
    <hr></hr>
    <p>Checkbox bound to list: <strong>{list}</strong></p>
    <p>
        <input type="checkbox" value="1" u-bind="list"> 1 
        <input type="checkbox" value="2" u-bind="list"> 2 
        <input type="checkbox" value="3" u-bind="list"> 3 
        <input type="checkbox" value="4" u-bind="list"> 4 
        <input type="checkbox" value="5" u-bind="list"> 5 
    </p>
    <hr></hr>
    <p>Checkbox bound to boolean:
        <input type="checkbox" u-bind="boolean">
        <strong>{boolean}</strong>
    </p>
</form>
`, {
    value: 1,
    list: ['1'],
    boolean: true
}, '#app');