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. ...
随机推荐
- C#中的编译开关
c#不支持宏定义,只支持编译开关. ======================================我想加上#define xxx就编译a代码,否则编译b代码,像这样的:#if xxxa ...
- 【第二十九章】 springboot + zipkin + mysql
zipkin的数据存储可以存在4个地方: 内存(仅用于测试,数据不会持久化,zipkin-server关掉,数据就没有了) 这也是之前使用的 mysql 可能是最熟悉的方式 es Cassandra ...
- redis持久化RDB和AOF-转载
Redis 持久化: 提供了多种不同级别的持久化方式:一种是RDB,另一种是AOF. RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AO ...
- 《算法竞赛入门经典》习题及反思 -<2>
数组 Master-Mind Hints,Uva 340 题目:给定答案序列和用户猜的序列,统计有多少数字对应正确(A),有多少数字在两个序列都出现过但位置不对. 输入包括多组数据.每组输入第一行为序 ...
- 【Coursera】SecondWeek(2)
The First Two Packets on the Internet Leonard Kleinrock Kleinrock 是一名工程师和计算机科学家,他在APRANET网络中起到了至关重要的 ...
- Linux——vim/vi 简单学习笔记
Vim/Vi是一个功能强大的全屏幕文本编辑器,是Linux/UNIX上最常用的文本编辑器,它的作用是建立.编辑.显示文本文件.Vim/Vi 没有菜单,只有命令. 早前也用过Vim变过C++/C的代码, ...
- python 集合的比较
setx = set(["apple", "mango"]) sety = set(["mango", "orange" ...
- bugfree 安装配置(Ubuntu16.04 amd 64 Desktop)
上面是我使用的版本! 1.首先搭建 xampp 下载XAMPP:https://www.apachefriends.org/download.html 注意:下载低版本的,不然之后会找不到mysql ...
- 部署showdoc
1.下载 https://github.com/star7th/showdoc 2.解压 sudo tar -zvxf ~/showdoc-2.4.5.tar.gz -C /home/wwwroot/ ...
- Docker Container的概述
·通过Image创建(copy) ·在Image layer之上建立一个container layer(可读写) ·类比对象:类和实例(Image相当于抽象的一个类,Container相当于实例化的一 ...