1、v-else 必须跟着v-if 或者 v-show 一起使用 ,充当else的作用。
<div id="example"> <p v-if="ok">男人</p> <p v-else="ok">女人</p> </div><script> new Vue({ el:"#example", data:{ ok:ture } });
</script>
2、v-model 用来在input ,select , text, checkbox,radio等表单标签控件上创建双向数据绑定。
<form> 姓名:<input type="text" v-model="data.name" placeholder="" /><br /> 性别:<input type="radio" id="man" value="one" v-model="data.sex" /> <lable for="man">男</lable> <input type="radio" id="male" value="two" v-model="data.sex" /> <lable for="male">女</lable> <input type="radio" id="noman" value="three" v-model="data.sex" /> <lable for="noman">隐私</lable><br /> 兴趣:<input type="checkbox" id ="book" value="book" v-model="data.interest" /> <label for="book">阅读</label> <input type="checkbox" id ="swim" value="swim" v-model="data.interest" /> <label for="swim">游泳</label> <input type="checkbox" id ="game" value="game" v-model="data.interest" /> <label for="game">游戏</label> <input type="checkbox" id ="song" value="song" v-model="data.interest" /> <label for="song">唱歌</label><br /> 身份:<select v-model="data.identity"> <option value="teacher">教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select></form> <script>
new Vue({ el:"#example", data:{ data:{ name:"1", sex:"one", interest:["book","song"], identity:"teacher" } }
});</script>
注意: 在表单控件赋默认值的时候,如果你想这样:<input type="checkbox" id ="book" value="book" v-model="data.interest" selected/>
那么你在data.interest中也必须有“book”的值。html中标签的默认值必须在Vue模版中的默认值之中,因为在v-model进行的是双向的数据绑定。
3、v-model 可以添加多个参数:number、lazy、debounce
- number 将用户输入的值自动转换成Number类型,如果原值转换结果为NaN,则返回原值。
- lazy 将input的数据改变发生到change事件中,不添加默认是同步改变的。
- debounce 设置最小的延时,用户输入数据的时候,同步数据的延时。(如果进行高消耗的操作比较有用,例如随时发送AJAX请求。)
时间: 2024-10-19 05:41:51