《Vue应用开发》课件——2.10双向数据绑定指令.pptxVIP

任务2.10双向数据绑定指令

步骤1演示v-model的使用方法步骤2创建src\components\VModel.vue文件。2.3.4 双向数据绑定指令

步骤1步骤2修改src\main.js文件，切换页面中显示的组件。importAppfrom./components/VModel.vue2.3.4 双向数据绑定指令演示v-model的使用方法

保存上述代码后，在浏览器中访问:5173/，v-model的初始页面效果如下图所示，文本框输入内容后，下方的数据随之修改。2.3.4 双向数据绑定指令

在输入框中输入“xiaoming”，页面效果如下图所示。2.3.4 双向数据绑定指令

步骤1演示.number修饰符的使用方法在src\components\VModel.vue文件的script标签中添加代码，定义响应式数据n1和n2。步骤3步骤22.3.4 双向数据绑定指令

在src\components\VModel.vue文件的template标签中添加代码，通过v-model实现双向数据绑定。步骤1步骤3步骤22.3.4 双向数据绑定指令演示.number修饰符的使用方法

保存上述代码后，在浏览器中访问:5173/，未使用.number修饰符的初始页面效果如下图所示。2.3.4 双向数据绑定指令

改变n1的值为“198”，查看n1+n2的值。改变n1的值为“198