基础用法

多行文本框

<div>
    <textarea v-model="text" />
    <p>你的输入是:</p>
    <pre>{self.get('text')}</pre>
</div>

单个复选框默认返回的是布尔值

<div>
    <input type="checkbox" v-model="checked" />
    当前checked的值为：{String(self.get('checked'))}
</div>

由于我们没有初始化checked属性，所以初始值为undefined

多选复选框，绑定的是数组

<div>
    <label><input type="checkbox" v-model="languages" value="Javascript" />Javascript</label>
    <label><input type="checkbox" v-model="languages" value="PHP" />PHP</label>
    <label><input type="checkbox" v-model="languages" value="Java" />Java</label>
    <div>你选择了：{JSON.stringify(self.get('languages'))}</div>
</div>

Intact.extend({
    template: template,
    defaults: function() {
        return {
            languages: [] 
        }
    }
});

1. 每一个checkbox必须提供value属性，来确定选中时的值
2. 必须初始化绑定的属性为数组

如果不初始化属性，或者初始化的值为非数组，则复选框将呈现出单选框的表现。

单选框

<div>
    <label><input type="radio" v-model="language" value="Javascript" />Javascript</label>
    <label><input type="radio" v-model="language" value="PHP" />PHP</label>
    <label><input type="radio" v-model="language" value="Java" />Java</label>
    <div>你选择了：{self.get('language')}</div>
</div>

<div>
    <select v-model="language">
        <option value="Javascript">Javascript</option>
        <option value="PHP">PHP</option>
        <option value="Java">Java</option>
    </select>
    <div>你选择了：{self.get('language')}</div>
</div>

多选列表

不同于多选复选框需要初始化绑定属性为数组，因为属性就可以确定是数组了