v-for与v-if

<div>

<template>//这里是渲染的按钮

<el-button :type="item.type" v-for="(item,index) in btnList" :key="index" @click="handleEvt(item.prop)">{{item.name}}</el-button>

</template>

//v-for基于源数据多次渲染元素或模板块.指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。为当前遍历的元素提供别名 <div v-for="item in items">{{ item.text }}</div>：另外也可以为数组索引指定别名 (或者用于对象的键)<div v-for="(val,name,index) in object"></div>：

//v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：<div v-for="item in/of items" :key="item.index">{{ item.text }}</div>为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute.建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

//Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：完整地触发组件的生命周期钩子/触发过渡.

//当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>) 上。

//在 v-for 块中，我们可以访问所有父作用域的 property。在data里parentMessage: 'Parent',{{ parentMessage }} - {{ index }} - {{ item.message }}。

//也可以用 v-for 来遍历一个对象的 property。第一个是值，第二个是键，第三个是索引. <div v-for="(index//索引 , name//键名 , value) in object"{{ index }}. {{ name }}: {{ value }}</div> data: { object: { title: 'How to do lists in Vue ' , author: 'Jane Doe', publishedAt: '2016-04-10' } }

<div>//这里是渲染的选择栏

<el-input v-model="queryObj[item.prop]" :placeholder="item.place" v-for="(item,index) in condition" :key="index" v-if="item.type=='input'" style="width:200px ; marginRight:20px"></el-input>

<el-select v-model="queryObj[item.prop]" :placeholder="item.place" v-for="(item,index) in condition" :key="index" v-if="item.type=='select'" style="marginRight:20px">

<el-option v-for="opt in item.option" :key="opt.id" :label="opt.label" :value="opt.value"></el-option>

</el-select>

</div>

<template>//这里是渲染的表格

<el-table :data="tableData" border style="width: 100%;marginTop:20px">

<el-table-column type="selection" width="55"></el-table-column>//这是选择框

<el-table-column v-for="(item,index) in tableHeader" :key="index" :prop="item.prop" :label="item.title" fit >//没有特殊样式的表格

<img :src="scope.row.img" alt="" v-if="item.prop=='img'">//显示的顺序是根据id来的

<el-button v-else-if="item.prop=='statistics'" type="text" @click="showStatic(scope.row)">查看</el-button>

<span v-else>{{scope.row[item.prop]}}</span>//除了特殊的图片和按钮，别的都是span样式，prop

</template>

</el-table-column>

</el-table>//这里可以加分页的组件。

</template>

export default {

name:'List',

data(){

return{

btnList:[

{name:'添加广告',type:'primary',prop:'add',show:true},

{name:'广告设置',type:'primary',prop:'setting',show:true},

{name:'试一试',type:'primary',prop:'try',show:true}

condition:[

{title:'标题',type:'input',prop:'title',show : true ,place:'请输入标题'},

{title:'渠道',type:'select',prop:'channel', show : true , place:'请选择渠道',option:[{label:'全部渠道',value:'all',id:0},{label:'华为',value:' huawei',id:1},{label:'小米',value:' xiao mi',id:2}]},

{title:'类型',type:'select',prop:'type',show:true,place:'请选择类型',option:[{label:'开屏广告',value:'kaiping',id:0},{label:'banner广告',value:'banner',id:1},{label:'弹窗广告',value:'dialog',id:2}]},

queryObj:{

title:'',

channel:'all',

type:'',

tableHeader:[

{title:'标题',prop:'title',child:[],id:0,show:true},

{title:'类型',prop:'type',child:[],id:1,show:true},

{title:'图片',prop:'img',child:[],id:2show:true},

{title:'数据统计',prop:'statistics',child:[],id:3,show:true},

tableData:[{title:'七夕节活动',type:'开屏广告',img:' '}],

}

} ,

methods:{

//点击事件

handleEvt(prop){

if(prop=='add'){

this.showDialog=true

this.$refs.adverDialog.openDia() //openDia()是写在弹窗组件里的显示弹窗的方法。

}else if(prop=='setting'){

this.showSetDialog=true

this.$refs.setDialog.openDia()

}else{

this.showTryDialog=true

this.$refs.tryDialog.openDia()

}