0111双向数据绑定 (1).pptx

Vue开发核心技术主讲教师：梁晓晖Vue基础指令双向数据绑定

1：双向数据绑定的作用与语法2：双向数据绑定的应用特点3：双向数据绑定的应用举例4：v-model修饰符的种类及作用目录5：v-model修饰符应用举例6：v-model修饰符的小结与作业

双向数据绑定指令注意：只有表单元素才可以使用v-model指令（比如：input、textarea、select等）。因为其他元素并没有交互功能，只有呈现功能。双向数据绑定指令语法vue提供了双向数据绑定指令v-model，可以帮助程序员在不操作DOM的情况下快速获取表单数据。v-model语法举例如下：

双向数据绑定指令应用特点举例：输入水果名称，购买内容实现同步更新。单击查看图片按钮实现图片更新。为了简单起见，只有苹果桔子有图片。双向数据绑定指令

思考：对于inputtype=“text”元素而言，它本身还有一个value属性。既然v-model能够进行数据绑定，要value做什么用呢？答案：这两个不可以同时使用。在原生JS中，就用使用:value来获取文本框中数据，在Vue中要进行双向数据绑定，就用v-model。双向数据绑定指令

7.双向数据绑定指令经典应用v-model经典小应用：下拉框的双向数据绑定双向数据绑定指令

v-model指令修饰符为了方便对用户输入的内容进行处理,vue为v-model指令提供了3个修饰符，分别是：修饰符作用举例.number自动将用户的输入值转换为数值类型inputtype=“text”v-model.number=“count”.trim自动过滤用户输入的首尾空白字符inputtype=“text”v-model.trim=“info”.lazy在change时而非input时更新inputtype=“text”v-model.lazy=“memo”双向数据绑定指令

.number修饰符应用举例及剖析使用修饰符.number可以将输入的数据转换为Number类型，否则虽然你输入的是数字.但它的类型其实是String，.number修饰符在需要使用数字输入框时非常有用。双向数据绑定指令比如，当我们输入12时，v-model.number=“num1”会自动将其转换为12,也就是说，num1=12.+会当成加号来处理但v-model=“num1”则会将返回“12”,也就是说，num1=“12”.+会当成字符串拼接来处理案例代码：

.trim修饰符应用举例及剖析.trim的自动过滤首位空格功能，能够避免用户误操作输入的无效空格字符，但是，字符串中间的空格是无法过滤的。案例代码：双向数据绑定指令

.lazy修饰符应用举例及剖析v-model的.lazy修饰符一般是用在input输入框的双向数据绑定上。如果不加.lazy修饰符,那么每当文本框有数据输入时都会触发数据同步，而其实在输入那些中间数据时是没有必要进行数据同步的，我们只需对最终的数据，进行一次同步即可.去除了无用功的开销，程序效率自然得到提高。案例代码：双向数据绑定指令

知识梳理双向数据绑定的语法双向数据绑定的经典举例v-model指令提供了3个修饰符简介v-model指令3个修饰符分别举例

思考题Image元素可以使用双向数据绑定吗?通过实例测试一下。都哪些页面元素可以使用v-model实现双向数据绑定？

作业利用双向数据绑定实现一个可以编辑单元格内容的表格。具体内容不限。

谢谢观看Vue开发核心技术