vue 列表循环数组并有操作方法method的使用方法

Sonder

2021-08-06

1113字

3分钟

浏览 (3k)

本篇主要是讲自定义method的方法

父组件

传的是一个数组

复制代码

<div :btnData="btnList"></div>

复制代码

btnList: [
  {
    name: '取消收藏',
    color: '#000',
    method: val => {
      console.log(val);
    },
  },
],

子组件

复制代码

props: {
 goodsItem: Object,
 btnData: Array,
},

复制代码

<view class="btn">
  <!-- <button type="default">取消收藏</button> -->
  <template v-for="btnItem in btnData">
    <template
      v-if="
        typeof btnItem.name === 'function'
          ? btnItem.name(goodsItem)
            ? btnItem.name
            : false
          : btnItem.name
      "
    >
      <button
        @click="btnItem.method(goodsItem)"
        :key="btnItem.name"
        :style="{
          color: btnItem.color,
          borderColor: btnItem.color,
          background: btnItem.bacgkColor ? btnItem.bacgkColor : 'unset',
        }"
      >
        {{
          typeof btnItem.name === 'function'
            ? btnItem.name(goodsItem)
            : btnItem.name
        }}
      </button>
    </template>
  </template>
</view>

上一篇 / js修改数组对象的Key和指定的值下一篇 / vue 提交时数据加密修改了原先的值

vue 列表循环数组并有操作方法method的使用方法

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)