先上案例

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

  • 以前写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. CPU性能监测介绍

    CPU的性能监测包含以下部分: * 检查系统运行队列并确保每个核心上不超过3个可运行进程* 确保CPU利用率的用户时间和系统时间在70/30之间* 当CPU花费更多的时间在system mode上时, ...

  2. video标签在移动端的一些属性值设置

    <video x5-video-orientation="portraint" src="" loop x-webkit-airplay="al ...

  3. jQuery 获得内容

    地址 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 一.text()  html() &l ...

  4. python 一周总结

    从7月27前就开始了Djangoj框架的学习到今天一个项目实战已经过了一半了, django给我的感觉就像一个成熟的mov 首先是是数据模型层,Django已经成熟的加入了很多的数据模型供我们所使用 ...

  5. css3实现倾斜转动的转盘

    HTML代码: <div class="r-1">a</div> <div class="r-2">a</div> ...

  6. SpringBoot初步介绍及安装

    SpringBoot的四个核心: 自动配置: 起步依赖: 命令行界面: Actuator: SpringBoot的web起步依赖:org.springframework.boot:spring-boo ...

  7. 模板中for 的使用

    from flask import Flask,render_template app = Flask(__name__) app.config.update( DEBUG = True, ) @ap ...

  8. 2019JAVA第十次实验报告

    Java实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019.11.15 评分等级 实验代码 package Domon9; import java.awt.Font; ...

  9. PostgreSQL通过解析日志，获取数据库增量变化，pg_recvlogical

    1.首先用该工具来看我们的日志变化,需要先将test_decoding插件编译并安装(进入contrib,编译安装即可) 创建一个slot: SELECT * FROM pg_create_logic ...

  10. Java static基本认知

    一. static的用途 在Java编程思想中有这么一句话:“static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没有创建任何对象的前提下,仅仅 ...