摘要:更进一步把所有设置满分值的先进行绑定,然后控制显示跟隐藏,这样一来目的达到了,但是一旦选项是从后台获取的话,后台一旦改动,这边就要跟着更改。说明定义满分值循环的数组说明此数组为上面的数据说明循环详细的写法
先上案例
首先来分析一下,勾选科目的时候,下面同时增加科目的满分值设置。
以前写jquery的思路:当勾选的时候创建dom节点,然后把dom节点append到父节点上,项目采用前后分离的方式进行交互,这样一来,所设置的科目满分值就脱离绑定了。更进一步:把所有设置满分值的input先进行绑定,然后控制显示跟隐藏,这样一来目的达到了,但是一旦选项是从后台获取的话,后台一旦改动,这边就要跟着更改。
充分利用数据驱动视图思想:
代码片段
1.说明:此函数作用,判断数组里面是否包含函数传入的值,这边使用遍历方法对数组进行循环,看数组里的对象的subject的值是不是跟传入的相等,如果相等就说明数组里面包含这项了,也就是说明了这个科目已经是勾选的状态了,也就要把他删除掉,这边删除使用splic方法(vue的变异方法),直接改变原数组的值,并处发vue对视图更新。
2.说明:定义满分值循环的数组
3、说明:此数组为上面CheckBox的数据
4、说明:v-for循环详细的写法
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98397.html
摘要:更进一步把所有设置满分值的先进行绑定,然后控制显示跟隐藏,这样一来目的达到了,但是一旦选项是从后台获取的话,后台一旦改动,这边就要跟着更改。说明定义满分值循环的数组说明此数组为上面的数据说明循环详细的写法 先上案例showImg(https://segmentfault.com/img/bVbieMK?w=864&h=154); 首先来分析一下,勾选科目的时候,下面同时增加科目的满分值...
摘要:更进一步把所有设置满分值的先进行绑定,然后控制显示跟隐藏,这样一来目的达到了,但是一旦选项是从后台获取的话,后台一旦改动,这边就要跟着更改。说明定义满分值循环的数组说明此数组为上面的数据说明循环详细的写法 先上案例showImg(https://segmentfault.com/img/bVbieMK?w=864&h=154); 首先来分析一下,勾选科目的时候,下面同时增加科目的满分值...
摘要:由于是需要兼容的后台系统,该项目并不能使用到等技术,因此我在上的经验大都是使用原生的编写的,可以看见一个组件分为两部分视图部分,和数据部分。 在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动,组件化的框架和react很像,从一开始的快速上手基本的开发,到后来开始自定义组件,对element UI的组件二次封装以满足项目需求,期间也是踩了不少坑。由于将来很长一...
摘要:具体步骤实现将需要的数据对象进行递归遍历,包括子属性对象的属性,都加上和。综上,在性能上的收益并不是最主要的,更重要的是它使得具备了现代框架应有的高级特性。 原文:你应该要知道的Vue.js 组件data为什么必须是函数? 因为组件可能被多处使用,但他们的data是私有的,所以每个组件都要return一个新的data对象 组件通信 父子组件通信:$on、$emit 非父子组件的通信...
阅读 2567·2021-11-02 14:39
阅读 4261·2021-10-11 10:58
阅读 1370·2021-09-06 15:12
阅读 1784·2021-09-01 10:49
阅读 1281·2019-08-29 18:31
阅读 1850·2019-08-29 16:10
阅读 3283·2019-08-28 18:21
阅读 821·2019-08-26 10:42