3-1 3.1Vue表单控件的数据绑定ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

3-1 3.1 Vue表单控件的数据绑定教学课件 Vue.js基础与应用开发实战（微课版）3.1 Vue表单控件的数据绑定可以用v-model指令在表单控件元素上创建双向数据绑定，v-model会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据。3.1.1 输入框的数据绑定输入框主要包括单行输入控件input和多行输入控件textarea。【实例3-1】使用v-model指令实现 input和textarea控件的双向数据绑定【操作要求】创建网页0301.html，使用v-model指令实现input和textarea控件的双向数据绑定，在页面输出input和textarea控件中输入的数据，并与输入框中数据同步变化。在Chrome浏览器中浏览网页0301.html的初始结果如图3-1所示。图图3-1 在在Chrome浏览器中浏览网页浏览器中浏览网页0301.html的初始结果的初始结果【实现过程】使用HTML编辑器Dreamweaver创建网页0301.html，在该网页中编写以下代码实现要求的功能。input控件的数据绑定：用户名:inputName textarea控件的数据绑定：留言内容：infoText var vm=new Vue(el:#app,data:inputName:吉琳,infoText:今天的志愿活动在哪里集合？rn几点集合？)浏览网页0301.html时，在页面的输入框中删除默认的数据或输入新的数据，页面中的输出内容也会同步变化。打开Chrome浏览器的控制台，在控制台提示符“”后分别输入以下代码：vm.inputName=李斯（然后按【Enter】键）vm.infoText=志愿活动成功开展（然后按【Enter】键）可以发现输入框中数据和页面中的输出内容同步发生了变化，如图3-2所示。图图3-2 通过浏览器控制台更新数据后，输入框中通过浏览器控制台更新数据后，输入框中数据和页面中的输出内容同步变化数据和页面中的输出内容同步变化实际上v-model是:value和input事件的语法糖，如下代码所示。【示例】：demo030101.html 用户名:inputName var vm=new Vue(el:#app,data:inputName:)【注意】：在文本区域插值（）并不会生效，应使用v-model来代替。3.1.3 单选按钮的数据绑定使用v-model指令也能实现单选按钮的双向数据绑定。【实例3-3】使用v-model指令实现单选按钮的 双向数据绑定【操作要求】创建网页0303.html，使用v-model指令实现单选按钮的双向数据绑定。浏览网页0303.html时，选中单选按钮的效果如图3-4所示。图图3-4 浏览网页浏览网页0303.html时选中单选按钮的效果时选中单选按钮的效果【实现过程】使用HTML编辑器Dreamweaver创建网页0303.html，在该网页中编写以下代码实现要求的功能。在线支付 货到付款 支付方式为:picked var vm=new Vue(el:#app,data:picked:在线支付 )3.1.4 选择列表的数据绑定使用v-model指令也能实现select列表的双向数据绑定，选择（select）列表分为单选列表和多选列表两种类型。1使用v-model指令实现单选列表的数据绑定【实例3-4】使用v-model指令实现 单选列表的双向数据绑定【操作要求】创建网页0304.html，使用v-model指令实现单选列表的双向数据绑定。浏览网页0304.html时，在下拉列表中有多个选项供选择，在列表项选中“湖南”选项的效果如图3-5所示。图图3-5 浏览网页浏览网页0304.html时在列表项选中时在列表项选中“湖南湖南”的效果的效果【实现过程】使用HTML编辑器Dreamweaver创建网页0304.html，在该网页中编写以下代码实现要求的功能。收货地址：请选择省 湖南 湖北 江西 四川 选择的省为:selected var vm=new Vue(el:#app,data:selected:)2使用v-model指令实现多选列表的数据绑定【实例3-5】使用v-model指令实现多选列表的 双向数据绑定【操作要求】创建网页0305.html，使用v-model指令实现多选列表的双向数据绑定。浏览网页0305.html时，在下拉列表中有多个选项供选择，在列表项选中“湖南”与“江西”两个选项的效果如图3-6所示。图图3-6 浏览网页浏览网页0304.html时在列表项中选择时在列表项中选择“湖南湖南”和和“江西江西”两个选项的效果两个选项的效果【实现过程】使用HTML编辑器Dreamweaver创建网页0305.html，在该网页中编写以下代码实现要求的功能。收货地址：请选择省 湖南 湖北 江西 四川 贵州 选择的省为:selected var vm=new Vue(el:#app,data:selected:)快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！