先上案例

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

  • 以前写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. flutter 图片圆角

    return Center( child: Container( padding: EdgeInsets.only(left: 10), width: 120, height: 80, child: ...

  2. win10 点击开始按钮无反应

    本人亲身经历 由于安装软件时需要注册表权限,在一顿猛如虎的操作下,将注册表中 HKEY_CURRENT_USER 的权限出问题.而导致无法打开 开始菜单 ----------------以下是本人为了 ...

  3. 阶段3 2.Spring_08.面向切面编程 AOP_2 spring中的aop术语和细节

    基于接口的动态代理要求,要去被代理对象最少实现一个接口 基于子类的动态代理没有实现接口的要求.但是要求我们的被代理类不能是最终类 在Spring中可以选择基于接口还是子类的动态代理 术语 大白话.业务 ...

  4. k8s中使用harbor

    参考地址:https://www.cnblogs.com/wayneiscoming/p/7716238.html .在harbor的ui界面上注册一个账号 姓名:zihao 全名:zhuzihao ...

  5. java：多线程（代理模式，Thread中的方法，Timer，生产者和消费者）

    *进程:一个正在运行的程序,进程是操作系统分配资源的基本单位,每个进行有独立的内存空间,进程之间切换开销较大. *线程:一个轻量级的进程,线程是任务调度的基本单位,一个进程可以有多个线程, * 系统没 ...

  6. codeblocks无法识别的16位程序解决方法

    被codeblocks心态搞崩了,分享一下经验给大家,具体就是无法运行编译好的程序,还有就是调试功能没法用. 查了很多资料,自己搞了一个终极解决方法:1卸载codeblocks,2打开我的电脑,全盘搜 ...

  7. windows系统安装的两个阶段

    windows visa .windows7.windows server 2008系统安装的两个阶段1.Boot.WIM----Windows PE系统.提供了windows7安装向导! 2.Ins ...

  8. spring + redis 实例（一）

    这一篇主要是redis操作工具类以及基本配置文本储存 首先我们需要定义一个redisUtil去操作底层redis数据库: package com.lcc.cache.redis; import jav ...

  9. c语言小技巧：C语言学习笔记之位运算求余

    我们都知道,求一个数被另一个数整除的余数,可以用求余运算符”%“,但是,如果不 允许使用求余运算符,又该怎么办呢?下面介绍一种方法,是通过位运算来求余,但是注 意:该方法只对除数是2的N次方幂时才有效 ...

  10. Python基础数据类型int

    整型int 赋值运算符 a=1 a+=1 #a=a+1 a-=1 #a=a-1 a*=1 #a=a*1 a/=1 #a=a/1 a**=1 #a=a**1 a%=1 #a=a%1 算数运算符 + - ...