先上案例

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

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

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

  • 代码片段

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

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

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

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

动态添加+动态绑定（vue数据驱动思路）的更多相关文章

  1. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  2. AngularJS 导航栏动态添加.active

    在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...

  3. Vue 中动态添加class（使用v-bind:class）

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  4. Vue页面权限控制和动态添加路由

    原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...

  5. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

  6. vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

  7. vue动态添加路由addRoutes之不能将动态路由存入缓存

    在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...

  8. 在vue项目中，通过v-for循环，动态添加后台返回的事件

    一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路: .假定后台返回数据为如下格式: list: [ { name: '李寻欢', kungF ...

  9. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

随机推荐

  1. PInvoke.net Visual Studio Extension

    https://visualstudiogallery.msdn.microsoft.com/9CA9D544-05D2-487B-AB49-31851483C1CC http://www.pinvo ...

  2. http协议详解之响应报文 3

    --------------响应示例--------------------------response#状态行HTTP/1.1 200 OK #协议及版本号.状态码.状态描述 #消息报头Date: ...

  3. python3.5 元组

    1.创建元祖 tup1 = ('jenkins','mysql') print(tup1) ssh://root@192.168.0.204:22/usr/bin/python -u /home/pr ...

  4. MySQL MGR 5.7.22 on centos 6.3 单主/多主搭建测试

    搭建Mysql Group Replication本次搭建采用3个实例,三个服务器,同一个网段,MGR的参数配置在配置文件中添加.注意通讯端口号的配置,它用于组成员之间的通讯使用请确定当前MySQL版 ...

  5. 做筛选遍历时遇到的json字符串、json对象、json数组 三者之间的转换问题

    这个是后台对登录用户以及筛选条件的操作 @Override public List<SdSdPer> listResults(String sidx, String sord) { try ...

  6. 2018-12-10 发布 vue全家桶实现的商城web-app，真实数据接口开发

    项目地址:https://github.com/Rosen97/web-shop.git 博客地址:https://segmentfault.com/a/1190000017323841

  7. Python unittest 之 BeautifulReport可视化报告

    众所周知的报告是HTMLTestRunner,虽然经过众多的大神修改后,功能挺强大的,但这颜值,我就不多说了,大家自己感受下吧 HTMLTestRunner就不多说了,近来发现了一款款式新颖,还不漏油 ...

  8. cocos2dx[3.2](3) 浅析CCDeprecated.h

    CCDeprecated.h中存放的都是2.x将要被抛弃的命名规范,主要包含类名.枚举类型. 虽然说2.x的这些命名规范被CCDeprecated.h保留了.但是为了彻底学习3.x的新特性,就必须要尽 ...

  9. 学习Go语言（二）快速入门

    作为一名学习过多种编程语言的“老码农”,学习一门新的语言不能像“新手”一样,要快速入门. 无论面向过程,还是面向对象的编程语言:静态语言,动态语言,一般都包括: 标识符.变量(常量).运算符.表达式. ...

  10. Markdown基础语法总结

    目录 区块元素 标题 列表 区块引用 代码区块 分隔线 段落和换行 区段元素 链接 强调 代码 图片 转义 标题 <a name="title"></a> ...