动态添加+动态绑定（vue数据驱动思路）

_ang 发布于2019-08-29 17:00 / 1682人阅读

摘要：更进一步把所有设置满分值的先进行绑定，然后控制显示跟隐藏，这样一来目的达到了，但是一旦选项是从后台获取的话，后台一旦改动，这边就要跟着更改。说明定义满分值循环的数组说明此数组为上面的数据说明循环详细的写法

先上案例

首先来分析一下，勾选科目的时候，下面同时增加科目的满分值设置。

以前写jquery的思路：当勾选的时候创建dom节点，然后把dom节点append到父节点上，项目采用前后分离的方式进行交互，这样一来，所设置的科目满分值就脱离绑定了。更进一步：把所有设置满分值的input先进行绑定，然后控制显示跟隐藏，这样一来目的达到了，但是一旦选项是从后台获取的话，后台一旦改动，这边就要跟着更改。

充分利用数据驱动视图思想：

代码片段

1.说明:此函数作用，判断数组里面是否包含函数传入的值，这边使用遍历方法对数组进行循环，看数组里的对象的subject的值是不是跟传入的相等，如果相等就说明数组里面包含这项了，也就是说明了这个科目已经是勾选的状态了，也就要把他删除掉，这边删除使用splic方法（vue的变异方法），直接改变原数组的值，并处发vue对视图更新。

2.说明：定义满分值循环的数组

3、说明：此数组为上面CheckBox的数据

4、说明：v-for循环详细的写法

GPU云服务器云服务器动态添加显示数据 js动态添加数据 jsp动态添加数据 js动态绑定数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114038.html

动态添加+动态绑定（vue数据驱动思路）

摘要：更进一步把所有设置满分值的先进行绑定，然后控制显示跟隐藏，这样一来目的达到了，但是一旦选项是从后台获取的话，后台一旦改动，这边就要跟着更改。说明定义满分值循环的数组说明此数组为上面的数据说明循环详细的写法先上案例showImg(https://segmentfault.com/img/bVbieMK?w=864&h=154); 首先来分析一下，勾选科目的时候，下面同时增加科目的满分值...

ad6623 2019-08-02 11:44 评论0 收藏0
动态添加+动态绑定（vue数据驱动思路）

摘要：更进一步把所有设置满分值的先进行绑定，然后控制显示跟隐藏，这样一来目的达到了，但是一旦选项是从后台获取的话，后台一旦改动，这边就要跟着更改。说明定义满分值循环的数组说明此数组为上面的数据说明循环详细的写法先上案例showImg(https://segmentfault.com/img/bVbieMK?w=864&h=154); 首先来分析一下，勾选科目的时候，下面同时增加科目的满分值...

canopus4u 2019-08-23 12:22 评论0 收藏0
VUE

摘要：注意指令前面需要加，对指令传递数据赋值使用例如约定速成加上，表示自定义指令不要使用驼峰式命名。需要通过方法实现自定义指令注册完成。 vue Vue.js 构建数据驱动的web界面库。集中实现MVVM 的 VM层。容易与其他库或项目整合通过尽可能简单的API实现相应的数据绑定和组合的视图组件核心：相应的数据绑定系统，数据与DOM保持同步数据驱动的视图，普通的HTML模板中使用特殊的语...

bergwhite 2019-08-19 18:39 评论0 收藏0
vue总结系列--数据驱动和响应式

摘要：由于是需要兼容的后台系统，该项目并不能使用到等技术，因此我在上的经验大都是使用原生的编写的，可以看见一个组件分为两部分视图部分，和数据部分。在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动，组件化的框架和react很像，从一开始的快速上手基本的开发，到后来开始自定义组件，对element UI的组件二次封装以满足项目需求，期间也是踩了不少坑。由于将来很长一...

AbnerMing 2019-08-22 18:26 评论0 收藏0
你应该要知道的Vue.js

摘要：具体步骤实现将需要的数据对象进行递归遍历，包括子属性对象的属性，都加上和。综上，在性能上的收益并不是最主要的，更重要的是它使得具备了现代框架应有的高级特性。原文：你应该要知道的Vue.js 组件data为什么必须是函数？因为组件可能被多处使用，但他们的data是私有的，所以每个组件都要return一个新的data对象组件通信父子组件通信：$on、$emit 非父子组件的通信...

张春雷 2019-08-22 15:37 评论0 收藏0