用产品的属性数据说明

页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上

产品属性数据为:

properties: "[

{"表面处理":["发黑","发白"]},

{"颜色":["红色","黄色"]},

{"大小":["10mm","20mm"]}

]"

html代码为:

<div class="row" v-for="(val, name, index) in properties" :key="index">  <!--循环外层数据-->
<div v-for="(pro,key,index) in val" :key="index"> <!--显示key,属性-->
<div class="left">
<p>{{key}}</p>
</div>
<div class="center showHeight">
<p class="spec filterorder shuxing" id="proper0">
<span data-id="0" class="active">全部</span>
<span data-id="" v-for="(val,i) in pro">{{val}}</span> <!--属性有多个,循环多个属性显示到页面-->
</p>
</div>
<div class="right" onclick="attrmore(this)">
<img src="img/genduo.png" style="display: none;">
</div>
</div>
</div>

1.重点记录一下类似于jquery中的key 与 value的显示
以下是vue的写法
val:{"表面处理":["发黑","发白"]}
 <div v-for="(pro,key,index) in val" :key="index">   <!--显示key,属性-->
<div class="left">
<p>{{key}}</p>
       <p>{{por}}</p>
        </div>
</div>
2以下的例子jQuery的写法
//加载属性
function propertieslist(data) {
var properties=data.t.goodsInfo.properties;
var proper=JSON.parse(properties);
var attrrow='';
var valueattr='';
$("#gcipList").children().remove();
var gcipTu = ' <div class="gcipTu">\n' +
' <img src="'+data.t.goodsInfo.mainPhotoUrl+'" alt="">\n' +
' </div><div class="row titlenow" id="titlenow"></div>';
$("#gcipList").append(gcipTu);
$.each(proper,function (i,obj) {
var Ospan='<span data-id="0" class="active">全部</span>';
for (key in obj){
attrrow='<div class="row">\n' +
' <div class="left">\n' +
' <p>'+key+'</p>\n' +
' </div>\n' +
' <div class="center showHeight">\n' +
' <p class="spec filterorder shuxing" id="proper'+i+'">\n' + ' </p>\n' +
' </div>\n' +
' <div class="right" onclick="attrmore(this)">\n' +
' <img src="img/genduo.png"> ' +
' </div>\n' +
' </div>';
//obj[key]当属性值为汉字时 甜 辣 就是数组 当属性值为英文字母时 就是字符串 需要再次切割
if (obj[key].constructor == Array){//判断属性的属性值是不是数组 如果属性值有多个,就是数组就可以遍历不会报错,如果是一个就不是数组
$.each(obj[key],function (j,tbj) {
Ospan+='<span data-id="'+key+'">'+tbj+'</span>';
})
}else if (obj[key].constructor == String){
$.each(obj[key].split(","),function (j,tbj) {
Ospan+='<span data-id="'+key+'">'+tbj+'</span>';
})
} else {
Ospan+='<span data-id="'+key+'">'+obj[key]+'</span>';
}
}
$("#gcipList").append(attrrow);
$('#proper'+i).append(Ospan);
});

  

vue里不同数据的循环,其中的数组对象的更多相关文章

  1. JavaScript怎么把对象里的数据整合进另外一个数组里

    https://blog.csdn.net/qq_26222859/article/details/70331833 var json1 = [ {"guoshui":[ 3000 ...

  2. for 循环 和 Array 数组对象

    博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...

  3. vue里的数据

    背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...

  4. vue里面的v-for列表循环

    列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...

  5. foreach循环时动态往数组里添加数据

    今天在用TP做项目的时候遇到一个问题,foreach的时候需要动态往数组里添加数据,示例代码如下: $arr = array( array('id'=>'字符串1','name'=>'字符 ...

  6. Vue 核心之数据劫持

    前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现 ...

  7. vue实现对数据的增删改查(CURD)

    vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...

  8. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  9. Django数据操作F和Q、model多对多操作、Django中间件、信号、读数据库里的数据实现分页

    models.tb.objects.all().using('default'),根据using来指定在哪个库里查询,default是settings中配置的数据库的连接名称. 外话:django中引 ...

随机推荐

  1. centos7虚拟机分配静态IP但是得不到IP、不能上网一种可能的原因和解决办法

    1.首先通过ifconfig查看网卡,发现网卡名称为ens33 2. 在/etc/sysconfig/network-scripts/目录下查看网络配置文件 3. 发现有ifcfg-eth0的配置文件 ...

  2. 通过sd文件发布的FeatureAccess服务不能查看到图层

    发布服务有两种方法, 1. 用ArcMap --Share As - service --publish a service 此方法可以直接将地图数据发布到ArcGIS  Server 的地图服务中, ...

  3. java 实现大顶堆

    Java实现堆排序(大根堆)   堆排序是一种树形选择排序方法,它的特点是:在排序的过程中,将array[0,...,n-1]看成是一颗完全二叉树的顺序存储结构,利用完全二叉树中双亲节点和孩子结点之间 ...

  4. js 字符串中"\"

    var a = '\a' console.log(a) // a ???? js 字符串中"\" 有特殊功能,反斜杠是一个转义字符 js 中 遇到字符串中有'\'时候需要注意 '\ ...

  5. Hadoop集群初步搭建:

    自己整理了一下Hadoop集群简易搭建的过程,感谢尚观科技贾老师的授课和指导! 基本环境要求:能联网电脑一台:装有Centos系统的VMware虚拟机:Xmanager Enterprise 5软件. ...

  6. RocketMQ解决幂等性问题

    一.造成重复消费的原因 在于回馈机制.正常情况下,消费者在消费消息时候,消费完毕后,会发送一个ACK确认信息给消息队列(broker),消息队列(broker)就知道该消息被消费了,就会将该消息从消息 ...

  7. ubuntu18.04图形模式切换到命令模式

    命令模式 :Ctrl+Alt+F5 图形模式:Ctrl+Alt+F1

  8. 题解 AT5632 【Sum of Two Integers】

    在幼儿园的时候,我们就学习过把一个数分成\(a\)与\(b\),我们只需要用计算机来模拟这个过程就可以了. 我们先从奇数开始看起,以\(5\)为例: 我们可以发现,\(5\)可以分成\(1\)和\(4 ...

  9. 第十周 11.28 psp0

    课堂测试总结 学生:马小心                                              日期:2017.11.28 作业号 日期 过程 估计数据 实际数据 累计数据 时间 ...

  10. weblogic的ssrf漏洞

    前言    什么是ssrf SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞. 一般情况下,SSRF攻击的目标 ...