动态添加+动态绑定(vue数据驱动思路)
先上案例
首先来分析一下,勾选科目的时候,下面同时增加科目的满分值设置。
- 以前写jquery的思路:当勾选的时候创建dom节点,然后把dom节点append到父节点上,项目采用前后分离的方式进行交互,这样一来,所设置的科目满分值就脱离绑定了。更进一步:把所有设置满分值的input先进行绑定,然后控制显示跟隐藏,这样一来目的达到了,但是一旦选项是从后台获取的话,后台一旦改动,这边就要跟着更改。
充分利用数据驱动视图思想:
- 代码片段
1.说明:此函数作用,判断数组里面是否包含函数传入的值,这边使用遍历方法对数组进行循环,看数组里的对象的subject的值是不是跟传入的相等,如果相等就说明数组里面包含这项了,也就是说明了这个科目已经是勾选的状态了,也就要把他删除掉,这边删除使用splic方法(vue的变异方法),直接改变原数组的值,并处发vue对视图更新。
2.说明:定义满分值循环的数组
3、说明:此数组为上面CheckBox的数据
4、说明:v-for循环详细的写法
动态添加+动态绑定(vue数据驱动思路)的更多相关文章
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- AngularJS 导航栏动态添加.active
在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- Vue页面权限控制和动态添加路由
原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...
- vue中v-bind:class动态添加class
1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
- vue动态添加路由addRoutes之不能将动态路由存入缓存
在我不知道vue的路由还可以通过addRoutes动态添加时,我只知道vue的路由都是写死在路由表中的,每当跳转时再去加载相应的路由.直到在一个新公司接到需要根据用户的权限显示不同的菜单的需求时才知道 ...
- 在vue项目中,通过v-for循环,动态添加后台返回的事件
一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路: .假定后台返回数据为如下格式: list: [ { name: '李寻欢', kungF ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
随机推荐
- OPCDAAuto的一个坑
最近项目需要对SCADA系统的下位机采集实时数据,常见做法是两种,一种采用ModBus RTU/TCP协议直接通过支持ModBus的下位机通信,一种是通过OPC规范,使用厂商提供的OPC Server ...
- nmon(linux监视)
nmon –f –t –r test –s 10 –c 60 即为10分钟 上面命令的含义是:-f :按标准格式输出文件名称:<hostname>_YYYYMMDD_HHMM.nmon-t ...
- harbor无法上传镜像解决
报错:[root@bogon harbor]# docker login 192.168.43.65:5000Username (admin): Password: Login Succeeded [ ...
- Activity启动模式分类(一)
standerd 默认模式,每次启动Activity都会创建一个新的Activity实例. 比如:现在有个A Activity,我们在A上面启动B,再然后在B上面启动A,其过程如图所示: single ...
- C++ 简介 基本语法 注释
一.第一个 C++ 程序 #include <iostream> using namespace std; int main() { cout << "Hello, ...
- 炼丹的一些trick
采摘一些大佬的果实: 知乎:如何理解深度学习分布式训练中的large batch size与learning rate的关系? https://blog.csdn.net/shanglianlm/ar ...
- Akka系列(二):Akka中的Actor系统
前言......... Actor模型作为Akka中最核心的概念,所以Actor在Akka中的组织结构是至关重要,本文主要介绍Akka中Actor系统. 1.Actor系统 Actor作为一种封装状态 ...
- The system has no LUN copy license
[问题描述] ipsan作为cinder后端的时候,通过快照创建磁盘失败,报以下错误: { u 'data': {}, u 'error': { u 'code': 1077950181, u 'de ...
- Maven从入门到精通(一)
maven是一个项目管理工具,我的后续将会根据这个思维导图给大家由浅到深讲解Maven是如何管理我们的项目,以及我们如何更好的使用Maven maven在开发过程中功能主要有三个方面: 管理依赖 ...
- CF140C New Year Snowmen(贪心+优先队列)
CF140C 贪心+优先队列 贪心策略:每次取出数量最多的三种球,合成一个答案,再把雪球数都-1再插回去,只要还剩下三种雪球就可以不断地合成 雪球数用优先队列维护 #include <bits/ ...