Vue.js实战第六章笔记

6.1基本用法
在 Vue 提供了v-model指令，用于在表单类元素上 双向绑定数据

使用v-model时，如果使用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时，才会触发更新。如果希望实时更新 ，可以用@input代替v-model

单选按钮：
单独使用时，用v-bind绑定一个布尔值，为真即选中

<input type="radio" :checked="picked">
data:{picked:true}

组合使用时，用v-model配合value使用

<input type="radio" v-model="picked" value="html" id="html">`在这里插入代码片`
<input type="radio" v-model="picked" value="js" id="js">
<input type="radio" v-model="picked" value="css" id="css">
data:{picked:'js'}

复选框：
单独使用时，用v-model绑定一个布尔值，为真即选中

<input type="checkbox" v-model="picked"  id="picked">
data:{picked:false}

组合使用时，用v-model配合value使用

<input type="checkbox" v-model="picked" value="html" id="html">
<input type="checkbox" v-model="picked" value="js" id="js">
<input type="checkbox" v-model="picked" value="css" id="css">
data:{picked:['html','js']}

选择列表：
单选，v-model优先匹配value值，没有的话再匹配option的text

<select v-model="selected">
<option value="js">javascript</option>
</select>
data:{selected:'js'}

给添加multiple就可以多选了，此时v-model绑定的是一个数组

<select v-model="selected" multiple>
<option>hmlt</option>
<option value="js">javascript</option>
</select>
data:{selected:['html','js']}

6.1绑定值
单选按钮：

<input type="radio" :checked="picked" :value="value">

复选框：

<input type="checkbox" v-model="picked"  :value="value">

6.2修饰符
.lazy 转变在change事件中同步,msg不会实时更新，而是在失焦或者回车才生效

<input type="text" v-model.lazy="msg">

.number 将输入转换为number类型
.trim 可以自动过滤输入的首位空格