首页 > 代码库 > 第二节:指令的使用(2)
第二节:指令的使用(2)
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="http://www.mamicode.com/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请求。)
第二节:指令的使用(2)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。