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. ...
随机推荐
- Python3基础 函数 无参数无返回值 调用会输出hello world的函数
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- insert into 和 where not exists
https://social.msdn.microsoft.com/Forums/sqlserver/en-US/3569bd60-1299-4fe4-bfa1-d77ffa3e579f/insert ...
- spring boot 修改Tomcat端口
package com.tsou.Controller; import org.springframework.boot.*; import org.springframework.boot.auto ...
- [JVM] - 继10进制的java.lang.Object查看之后
cmd清除命令:cls 之后查阅了其它博客,发现这位大神同样也在做JVM,并且我很希望用它的10进制转16进制类来测试一下该解析的10进制是否对应着Object的16进制呢? 这位大神的10进制转16 ...
- Win7上安装WMware虚拟机和Ubuntu操作系统
效果图: 问题拾遗: 一.如何划分一个新硬盘空间? 参考链接:如何新建磁盘空间 效果图: 我划分了20G的内存空间给Ubuntu的硬盘空间.一般来说15G就够用了. 二.VMware上拷贝Ubuntu ...
- js文字转移效果
这个例子算是有点样子的. 思路: 字符串操作.左框里面先是预设的.点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面,以此循环.点击按钮时按钮变为灰色,在循环完成后恢复.计数的总数(右边)是 ...
- C#在服务端验证客户端证书(Certificate)
使用https协议进行通讯的时候可以设置双向证书认证,客户端验证服务端证书的方法前面已经介绍过了,现在说一下在服务端验证客户端证书的方案. 这里给出的方案比较简单,只需要在Service端的配置文件中 ...
- Windows系统下在Eclipse中集成Python
我现在偶尔开发代码,已经不用Eclipse了,主要原因是查看Jar包中的代码反编译十分不便,项目加载的时候卡,偶尔还会崩溃 用Intellij IDEA和PyCharm 原来的笔记如何在Eclipse ...
- Spring 事物机制总结
Spring两种事物处理机制,一是声明式事务,二是编程式事务 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...
- Codeforces 388A - Fox and Box Accumulation
388A - Fox and Box Accumulation 思路: 从小到大贪心模拟. 代码: #include<bits/stdc++.h> using namespace std; ...