3-2 3.2绑定valueppt课件 Vue.js基础与应用开发实战（微课版）

单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/10/3,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2022/10/3,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,3-2 3.2 绑定value教学课件 Vue.js基础与应用开发实战（微课版）,3.2,绑定,value,对于单选按钮、选择列表选项，,v-model,绑定的,value,通常是静态字符串；,对于复选框，如果只有一个复选框，,v-model,绑定的是一个逻辑值。,如果有多个复选框，,v-model,绑定的是一个数组。,例如：,湖南,如果要绑定,value,到,Vue,实例的一个动态属性上，就可以用,v-bind,实现，并且这个属性的值可以不是字符串。,3.2.1,复选框绑定,value,【,实例,3-7】,使用,v-model,实现复选框绑定,value,【,操作要求,】,创建网页,0307.html,，使用,v-model,实现复选框绑定,value,。浏览网页,0307.html,时的初始状态如图,3-8,所示，复选框的选中与未选中状态如图,3-9,所示。,图,3-8,浏览网页,0307.html,时的初始状态,图,3-9,网页,0307.html,浏览时复选框的选中与未选中状态,【,实现过程,】,使用,HTML,编辑器,Dreamweaver,创建网页,0307.html,，在该网页中编写以下代码实现要求的功能。,货到付款,toggle,var vm=new Vue(,el:#app,data:,toggle:,t:true,f:false,),3.2.2,单选按钮绑定,value,【,实例,3-8】,使用,v-model,实现单选按钮绑定,value,【,操作要求,】,创建网页,0308.html,，使用,v-model,实现单选按钮绑定,value,。浏览网页,0308.html,时的初始状态如图,3-10,所示，单选按钮的选中状态如图,3-11,所示。,图,3-10,浏览网页,0308.html,时的初始状态,图,3-11,网页,0308.html,浏览时单选按钮的选中状态,【,实现过程,】,使用,HTML,编辑器,Dreamweaver,创建网页,0308.html,，在该网页中编写以下代码实现要求的功能。,货到付款,pick,var vm=new Vue(,el:#app,data:,pick:,t:true,),3.2.3,选择列表绑定,value,【,实例,3-9】,使用,v-model,实现选择列表绑定,value,【,操作要求,】,创建网页,0309.html,，使用,v-model,实现选择列表绑定,value,。浏览网页,0309.html,时，在下拉列表中有多个选项供选择，在列表项选中“湖南”选项的效果如图,3-12,所示。,图,3-12,浏览网页,0304.html,时在列表项选中“湖南”的效果,【,实现过程,】,使用,HTML,编辑器,Dreamweaver,创建网页,0309.html,，在该网页中编写以下代码实现要求的功能。,收货地址：,请选择省,湖南,湖北,江西,选择的省为,:selected.site,var vm=new Vue(,el:#app,data:,selected:,),快乐学习！高效学习！,祝学习进步！,