常用,只要是输入基本上离不开它。
<input type="text" v-model="name"/>
{{name}}
data : {
name : ''
}
这样就可以实现绑定 而且他后面也有很多功能,比如.lazy,惰性更新,只有焦点离开才会更新
<input type="text" v-model.lazy="name"/>
.trim去掉所有空格
但model不止是用来绑定输入框的,它是用来绑定表单的,自然能绑定其他属性,复选框,单选框,列表等 单选框:
<input type="radio" name="" id="" value="百度" v-model="rck"/>百度<br />
<input type="radio" name="" id="" value="阿里" v-model="rck"/>阿里<br />
<input type="radio" name="" id="" value="腾讯" v-model="rck"/>腾讯<br />
选择的是——{{rck}}
data : {
rck : '',
}
因为是双向选择,所以如果把rck的默认值改成百度,那刚进入页面的时候就会默认选中百度。
复选:
<input type="checkbox" name="" id="" value="男" v-model="love" />男<br />
<input type="checkbox" name="" id="" value="女" v-model="love" />女<br />
<input type="checkbox" name="" id="" value="扶她" v-model="love" />扶她<br />
<input type="checkbox" name="" id="" value="伪娘" v-model="love" />伪娘<br />
你的性取向是——{{love}}
data : {
love : [],
}
同理,在love里面填value也会默认选中,但love是个数组而rck是个字符串
列表:
<select v-model="sel" name="">
<option value="">选择你的性别</option>
<option value="男">男</option>
<option value="女">女</option>
<option value="扶她">扶她</option>
<option value="伪娘">伪娘</option>
</select><br />
你的性别是——{{sel}}
data : {
sel : '',
}