<table class="table table-bordered table-hover table-item spggdytable"
id="ggxtable" v-show="isAddSpecifications">
<thead>
<th>排序</th>
<th>规格项</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item,index) in specifications">
<td>{{index}}</td>
<td>{{item.specificationName}}</td>
<a href='#'> <img src='../img/common_edit@25.png' alt='修改'></a>
<a href='#'><img src='../img/common_del@25.png' alt='删除'></a>
</tbody>
</table>
<table class="table table-bordered table-hover table-item spggdytable"
id="ggztable" v-show="isAddSpecifications">
<thead>
<th>规格值</th>
<th>操作</th>
</thead>
<tbody v-for="(item,index) in specifications">
<tr v-for="(part,n) in item.specificationItem">
<td>{{part.value}}</td>
<a href='#'> <img src='../img/common_edit@25.png' alt='修改'></a>
<a href='#'><img src='../img/common_del@25.png' alt='删除'></a>
</tbody>
</table>
specifications:[ { specificationName:"颜色", specificationItem:[ {value:"黄色"}, {value:"黑色"} ] }]class="table table-bordered table-hove
1、v-if指令
v-if是一个指令，必须将它添加到一个元素上，根据表达式的结果判断是否
输出
该元素。
实例：
输出
数据
对象
中属性a和b的值，并根据比较两个属性的值，判断是否
输出
比较结果
<div id="box">
<p>a的值是{{a}}</p>
<p>b的值是{{b}}</p>
<p v-if=“a<b”>a小于b</p>
关键在于 v-for 的
嵌套
中，下一层
嵌套
中的 in 的
对象
，需要是外层
嵌套
中遍历的
对象
比如，此处，内层的 itemList 就是在 item 中进行遍历的，而 item 恰是外层
嵌套
的
对象
item
嵌套
循环中，内层循环用 itemList in listL.list 是不行的
JSON 数据
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<div v-for="goods_list in goods_lists">
<div v-for="good in goods_list.goods">
<img class="menu_goods_img" :src="good.src">
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一
个表
格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
拿到后台数据后，先看一下数据结构一般都是：[{ “name”: “北京市”,[{ “name”: “北京市”,[]}]},{},{}]
思路：在
vue
中这样写（不管在什么框架下写，思路都是一样的）
重点: 给select>option 加事件，必须的 @click.native=“事件名”
<select> <opt
v-for 指令根据一组数组的选项列表进行渲染v-for="item in items"items是一个数组，item是当前被遍历的数组元素。<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style
在
Vue
中，我们可以使用v-for指令来遍历数组或
对象
，然后生成相应的视图。假设我们有一个数组，我们想让每行显示三个元素，可以使用一个计算属性来将数组分割成多个小数组，然后在模板中使用
嵌套
的v-for指令来循环这些小数组。
首先，我们可以定义一个计算属性，将原始数组分割成多个小数组：
computed: {
chunkedItems() {
const chunkSize = 3;
const chunks = [];
for (let i = 0; i < this.items.length; i += chunkSize) {
chunks.push(this.items.slice(i, i + chunkSize));
return chunks;
在这个例子中，我们使用了一个循环来将原始数组分割成大小为3的小数组，并将它们保存在一个新的数组中。然后，我们返回这个新的数组作为计算属性的值。
接下来，我们可以在模板中使用
嵌套
的v-for指令来遍历这些小数组，并生成相应的视图：
<div v-for="chunk in chunkedItems" :key="chunk">
<div v-for="item in chunk" :key="item.id">
{{ item }}
在这个例子中，我们使用了两个v-for指令。外部的v-for循环遍历分割后的小数组，内部的v-for循环遍历每个小数组中的元素。由于我们在模板中使用了
嵌套
的div元素，我们可以轻易地将每行显示三个元素。
总之，使用计算属性和
嵌套
的v-for指令可以很容易地让我们在
Vue
中实现每行显示三个元素的功能。
