Vue2：用一个例子理解一下vue template中属性前面的冒号“:“

我是飞鸟呀

于 2024-12-27 17:30:00 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/l_q_l/article/details/144747366

Vue 专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

常用写法

table中绑定数据，我们通常这么写：


<el-table :data="tableData" style="width: 100%">

data() {
        tableData:[],
}

data绑定变量名可变的动态对象

但是上一篇文中，因为要生成15组相似的table，它们的格式都一样，只是数据源不同。所以使用v-for创建，data绑定的数据源要动态指定，不能统一使用tableData.

错误写法

第一次改写如下：

<div v-for="item in checkReportOptions" :key="item.key" 
v-show="checkedList.indexOf(item.key) >= 0">
    <el-table :data="`${item.key}Data`" style="width: 100%">
</div>

data() {
    checkReportOptions:[
        {key:'perVersion', label:"版本Bug数量",defaultReportType:"pie"},
        {key:'perModule', label:"模块Bug数量",defaultReportType:"pie"},

了解本专栏