先上案例

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

  • 以前写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. ubuntu中将本地文件上传到服务器

    (1)在本地的终端下,而不是在服务器上.在本地的终端上才能将本地的文件拷入服务器. (2) scp -r localfile.txt username@192.168.0.1:/home/userna ...

  2. django 数据库操作详解

    Django配置使用mysql数据库 修改 settings.py 中的 DATABASES  注意:django框架不会自动帮我们生成mysql数据库,所以我们需要自己去创建. DATABASES ...

  3. Java基础面试题集（二）

    Java程序员面试题集(1-50) 一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象 ...

  4. Series的idxmax和argmax

    转载至:https://www.cnblogs.com/liulangmao/p/9211537.html pandas Series 的 argmax 方法和 idxmax 方法用于获取 Serie ...

  5. 2019JAVA第五次实验报告

    Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间2019/10/11 评分等级 实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. ...

  6. String StringBuffer StringBuilder区别与联系

    java.lang.String.java.lang.StringBuffer.java.lang.StringBuilder都是字符串类型,是Java中用于处理字符串常用的三个类.它们主要有以下区别 ...

  7. CM金丝雀Canary报错

    参考: https://www.cnblogs.com/barneywill/p/10400788.html CM金丝雀Canary报错 1 HDFS 金丝雀Canary 测试无法为 /tmp/.cl ...

  8. git reset –mixed –soft –hard命令解释。

    直接看官方的解释. 其中HEAD代表版本库,index代表暂存区,另外还有一个我们增删改代码的工作区.所以官方解释翻译过来就是: --hard : 回退版本库,暂存区,工作区.(因此我们修改过的代码就 ...

  9. python中self与__init__怎么解释能让小白弄懂？

    python中self与__init__怎么解释能让小白弄懂? 这个问题其实没那么简单. 只说一下自己的理解. python 里所有的 object 都有三个属性, 标识(identity), 类型( ...

  10. ElasticSearch基础知识讲解

    第一节 ElasticSearch概述 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTfull web接口.ElasticSea ...