基础用法

文本框

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

多行文本框

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

使用<textarea>{self.get('text')}</textarea>并不能双向绑定，请使用v-model

复选框

单个复选框

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

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

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

v-model-true & v-model-false

上述例子，默认绑定的是布尔值，通过v-model-true和v-model-false指令，我们可以定义选择和非选择状态时的值

<div>
    <input type="checkbox"
        v-model="value" 
        v-model-true={1}
        v-model-false="a"
    />
    当前value为：{JSON.stringify(self.get('value'))}
</div>

v-model-true和v-model-false的值如果为引用类型，则不要使用字面量赋值给它们，因为在底层判断是否选中使用全等===，字面量对象每次都会创建新对象，会使判断失败。例如：v-model-true={{a: 1}}，每次都会创建新的{a: 1}，全等判断失败。我们应该将引用类型在组件中定义好，然后将变量赋给它们。例如：v-model-true={self.trueValue}，在组件中定义this.trueValue = {a: 1}

多选复选框

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

<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="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>你选择了：{self.get('languages')}</div>
</div>

单选框

<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>

同复选框，单选框也必须提供value属性

单选列表

<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>

多选列表

多选列表，绑定的是数组

<div>
    <select multiple={true} v-model="languages">
        <option v-for={['Javascript', 'PHP', 'Java']}
            value={value}
        >{value}</option>
    </select>
    <div>你选择了：{JSON.stringify(self.get('languages'))}</div>
</div>

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