问题一、 我需要渲染数组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 框架中遇到的诀窍的更多相关文章

  1. 如何在vue框架中兼容IE

    IE目前已经放弃了自己的独特化,正一步步迎入互联网的主流怀抱.但迫于有用户存在,还是要兼容到IE8,9, 以上. 下面聊一下如何在vue框架中兼容IE 1.首先在index.html <meta ...

  2. vue框架中props的typescript用法

    vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...

  3. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

  4. yarn 在Vue框架中的常用命令

    初始化项目 yarn add init 安装vue yarn add vue 安装webpack,webpack-dev-server(是一个小型的Node.js Express服务器) yarn a ...

  5. 在Vue框架中使用百度地图

    1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...

  6. vue框架中实现今天昨天前天最近时间

    点击下拉出几个选项,根据日期不同来过滤数据.看图--(忽略小梨子,这是日常练手页面) (element ui) 点击today-当天日期 点击last three days 点击custom,并且实现 ...

  7. vue框架中什么是MVVM

    前端页面中使用MVVM的思想,即MVVM是整个视图层view的概念,属于视图层的概念. MVVM是前端视图层的分层开发思想,将页面分成了Model, View,和VM:其中VM是核心,因为VM是V和M ...

  8. vue框架中的Axios封装

      function axios(options) {     let promise = new Promise((resolve, reject) => {         var xhr ...

  9. Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案

    需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...

随机推荐

  1. Duilib Edit编辑框禁止输入中文的方法

    转载:http://www.myexception.cn/vc-mfc/300749.html 编辑框是供用户输入的,但有时候我们要限制用户输入的内容,比如我们不让用户输入中文,只能输入字符和数字,因 ...

  2. P3386 【模板】二分图匹配 -网络流版

    二分图匹配 题目背景 二分图 感谢@一扶苏一 提供的hack数据 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+ ...

  3. FJUT 奇怪的数列(线性选择算法)题解

    题意:找出无需数列中位数(偶数为两个中位数平均数向下取整) 思路:用nth_element(a + first,a + k,a+ end + 1)找出中位数,复杂度一般为O(n).这个STL能将 [ ...

  4. BZOJ5281: [Usaco2018 Open]Talent Show 01分数规划+01背包

    Description FarmerJohn要带着他的N头奶牛,方便起见编号为1…N,到农业展览会上去,参加每年的达牛秀!他的第i头奶牛重 量为wi,才艺水平为ti,两者都是整数.在到达时,Farme ...

  5. 【TCP/IP详解 卷一:协议】第十二章 广播与多播 ping实验

    我手机连接到wifi上所分配到的IP地址:192.168.1.116 子网掩码:255.255.255.0 路由器:192.168.1.1 ping 192.168.1.116 (ping 一台主机的 ...

  6. undefined!=false之解 及==比较的规则

    JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...

  7. UVa 714 抄书(贪心+二分)

    https://vjudge.net/problem/UVA-714 题意:把一个包含m个正整数的序列划分成k个非空的连续子序列,使得每个正整数恰好属于一个序列.设第i个序列的各数之和为S(i),你的 ...

  8. python 字节数组和十六进制字符串互转

    . 字节数组 --> 十六进制字符串 >>> a = 'ab' >>> a.encode('hex') ' . 十六进制字符串 --> 字节数组 > ...

  9. Kali Linux下常用软件安装及配置

    0x00 Synaptic Synaptic(新立得)是一个高级软件包管理器,它可以管理系统内安装的每个软件及包组件,在图形界面内完成LINUX系统软件的搜寻.安装和删除. Synaptic安装简单, ...

  10. STL_算法_06_遍历算法

    ◆ 常用的遍历算法: 1.1.用指定函数依次对指定范围内所有元素进行迭代访问.该函数不得修改序列中的元素 functor for_each(iteratorBegin, iteratorEnd, fu ...