先上案例

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

  • 以前写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. 原生dapper中新增用户后根据用户id,在用户角色表中添加关联数据,事务处理

    var result = 0; var userId = 0; using (var db = _Sql.Connection) using (var tran =db.BeginTransactio ...

  2. IIS部署网站 HTTP 错误 500.21 - Internal Server Error

    HTTP 错误 500.21 - Internal Server Error处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipel ...

  3. 【内部】Fiddler设置代理请求的方式

    1.2 打开Fiiddler,设置如图步骤: 3.添加规则: 4.这里选择第三个选项: 5.选中^开始,空格结束的如图内容.复制你要代理的地址.如:http://wap.cmread.com/nap/ ...

  4. eclipse 包含头文件出错

    最近这段时间自己在写游戏的框架,在做的过程中遇到了一个问题:没办法#include <iostream>,在eclipse下F3也找不到对应的 iostream 文件, 最后在晚上找资料, ...

  5. CTF—攻防练习之ssh私钥泄露

    攻防练习1 ssh私钥泄露 靶场镜像:链接: https://pan.baidu.com/s/1xfKILyIzELi_ZgUw4aXT7w 提取码: 59g0 首先安装打开靶场机 没办法登录,也没法 ...

  6. Java内部类介绍

    在Java中,内部类包括:成员内部类(静态内部类.非静态内部类).匿名内部类.局部内部类(几乎不用). 1.成员内部类: 1.1非静态成员内部类 public class InnerClassTest ...

  7. Python基础语法之文件操作

    1 读文件 1.1 简单读文件 f = open('text', 'r') # f是文件句柄 data = f.read() # read方法可以加整型参数,是几就读几个字符 print(data) ...

  8. 【PyTorch】PyTorch使用LMDB数据库加速文件读取

    PyTorch使用LMDB数据库加速文件读取 原始文档:https://www.yuque.com/lart/ugkv9f/hbnym1 对于数据库的了解较少,文章中大部分的介绍主要来自于各种博客和L ...

  9. angular [NgClass] [NgStyle],NgIf,[ngSwitch][ngSwitchCase]

    [NgClass]  CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型: string - 会把列在字符串中的 CSS 类(空格分隔)添加进来, Array - 会把数组中的各个元素作 ...

  10. 搭建属于自己的图床(基于阿里云OSS,成本9元+20分钟)

    之前的笔记都存在有道云笔记上,慢慢转化为Markdown格式分享出来,这中间遇到了一个图片问题,找了好久,了解到图床,然后找了谷歌插件中微博图床插件,用了一段时间发现,每次都需要登录微博,然后我又是一 ...