Vue 框架中遇到的诀窍
问题一、 我需要渲染数组A,并根据 B数组中是否存在A中,给A添加 选中状态sel。
经过很焦虑的研究后,寻求帮助得到答案。
1、初始化数据时 A添加属性flag(bool)标识,如果B中存在A中某个 就 flag=true。
2、渲染页面时 使用关键 指令:class (v-bind) ,
{'select-tag': item.flag}解析: 当 item.flag 为 true时输出 select-tag
<div class="block-tags" :class="['',{'select-tag': item.flag}]" v-for="(item,index) in defaultType" :data-id="item.id">
{{ item.name }}
</div>
总结: 实战验实力
问题二、异步获取数据后 获取到 B对象,于是乎我把 A = B , C = B ;
结果: 在使用当中,一旦 修改 ABC任意值,三个都会被修改。 这真是无语了。
最终解决方案:
使用了 JS:Object.assign Object.assign(target, ...sources)
这个简直厉害了, A = Object.assign([], B); 这样就解决问题了。
一级棒~!
Vue 框架中遇到的诀窍的更多相关文章
- 如何在vue框架中兼容IE
IE目前已经放弃了自己的独特化,正一步步迎入互联网的主流怀抱.但迫于有用户存在,还是要兼容到IE8,9, 以上. 下面聊一下如何在vue框架中兼容IE 1.首先在index.html <meta ...
- vue框架中props的typescript用法
vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
- yarn 在Vue框架中的常用命令
初始化项目 yarn add init 安装vue yarn add vue 安装webpack,webpack-dev-server(是一个小型的Node.js Express服务器) yarn a ...
- 在Vue框架中使用百度地图
1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...
- vue框架中实现今天昨天前天最近时间
点击下拉出几个选项,根据日期不同来过滤数据.看图--(忽略小梨子,这是日常练手页面) (element ui) 点击today-当天日期 点击last three days 点击custom,并且实现 ...
- vue框架中什么是MVVM
前端页面中使用MVVM的思想,即MVVM是整个视图层view的概念,属于视图层的概念. MVVM是前端视图层的分层开发思想,将页面分成了Model, View,和VM:其中VM是核心,因为VM是V和M ...
- vue框架中的Axios封装
function axios(options) { let promise = new Promise((resolve, reject) => { var xhr ...
- Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案
需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...
随机推荐
- Java序列化流-ObjectOutputStream、ObjectInputStream
Java对象流的基本概念: 实例代码: 实体类User: import java.io.Serializable; /** * @author zsh * @company wlgzs * @crea ...
- Linux中设备号及设备文件【转】
本文转载自:http://blog.csdn.net/ymangu666/article/details/39292651 主.次设备号 应用程序可以通过对/dev 目录下的设备文件读写,从而访问实际 ...
- win7 64位debug解决方法
1.下载win 64位的DOSBox,如DOSBox0.74: 2.下载win 32 debug.exe,并复制到调用的目录,如d盘根目录d:\ 3.安装DOSBox,并运行:如下图: 4.键入命令: ...
- 51NOD 1027 大数乘法
1027 大数乘法 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 给出2个大整数A,B,计算A*B的结果. Input 第1行:大数A 第2行:大数B (A,B ...
- 使用u盘重装双系统中的乌班图
之前的乌班图被我玩坏了,故而想重装一个.由于之前的双系统是同学帮我装的,我便到网上找各种资料,鼓弄了一天,终于完事了.把过程记录一下. window10 64bit ubuntu 14.04 desk ...
- LA 4287 等价性证明(强连通分量缩点)
https://vjudge.net/problem/UVALive-4287 题意: 给出n个结点m条边的有向图,要求加尽量少的边,使得新图强连通. 思路:强连通分量缩点,然后统计缩点后的图的每个结 ...
- fusion--RNAseq
融合基因(Fusion gene)是指两个基因的全部或一部分的序列相互融合为一个新的基因的过程.其有可能是染色体易位.中间缺失或染色体倒置所致的结果. 异常的融合基因可以引起恶性血液疾病以及肿瘤.例如 ...
- Android广播接收器里弹出对话框
不多说,直接上车... public class MyReceiver extends BroadcastReceiver { @Override public void onReceive(fina ...
- 【Ctsc2011】幸福路径
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2306 给定一张有向图,每个点有权值,蚂蚁从某个节点出发,初始体力值为$1$,每走一条边$体 ...
- Node.js结合Selenium做Web自动化测试
发现腾讯课堂上有个node.js结合Selenium做Web自动化测试的教学视频, 听来感觉不错,一来老师讲的还不错,二来node.js这门语言会越来越热,学会总没什么坏处,三来发现CukeTest这 ...