<el-row> <el-col :span="4" v-for="card in cardList" :key="card.id"> <el-card :body-style="{ padding: '0px' }"> <img :src="card.imageUrl" class="image"> <div style="padding: 14px;"> <el-link :underline="false" @click="comm()">{{ card.title }}</el-link> </div> </el-card> </el-col> </el-row>
时间: 2024-04-28 10:25:56 浏览: 15
这段代码看起来像是使用了 Element UI 组件库的 el-row、el-col 和 el-card 组件来展示一组卡片,其中 el-row 组件用来表示一行,el-col 组件用来表示一列,v-for 指令用来遍历卡片列表,:key 绑定每个卡片的 id 属性,el-card 组件用来展示卡片内容,包括卡片图片和标题,el-link 组件用来展示卡片标题,并添加了一个点击事件 comm。其中 :body-style="{ padding: '0px' }" 是用来设置卡片的内边距为 0 的样式。
相关问题
for循环el-card点击其中一个卡片,只改变这个卡片的背景颜色
好的,你可以使用以下代码来实现这个需求:
```html
<template>
<div>
<el-card v-for="(item, index) in cardList"
:key="index"
:style="{ backgroundColor: item.bgColor }"
@click="changeBgColor(index)">
<p>{{ item.title }}</p>
<p>{{ item.content }}</p>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
cardList: [
{ title: 'Card 1', content: 'Content of card 1', bgColor: '#ffffff' },
{ title: 'Card 2', content: 'Content of card 2', bgColor: '#ffffff' },
{ title: 'Card 3', content: 'Content of card 3', bgColor: '#ffffff' }
]
}
},
methods: {
changeBgColor(index) {
// 将点击的卡片背景颜色改为红色
this.cardList[index].bgColor = '#ff0000';
}
}
}
</script>
```
以上代码中,我们使用了 `v-for` 指令循环渲染了一组卡片,每个卡片的背景颜色由 `item.bgColor` 决定。当用户点击某个卡片时,会触发 `changeBgColor` 方法,该方法会将对应卡片的 `bgColor` 属性值改为红色。这样就实现了只改变点击卡片背景颜色的需求。
vue3 循环添加el-card
在 Vue3 中循环添加 `el-card` 可以使用 `v-for` 指令和组件的方式来实现。首先需要将 `el-card` 封装成一个组件,然后在父组件中使用 `v-for` 循环渲染这个组件。
下面是一个示例代码:
```html
<template>
<div>
<my-card v-for="(item, index) in cardList" :key="index" :title="item.title" :content="item.content"></my-card>
</div>
</template>
<script>
import MyCard from './MyCard.vue';
export default {
components: {
MyCard
},
data() {
return {
cardList: [
{
title: 'Card 1',
content: 'This is the content of card 1'
},
{
title: 'Card 2',
content: 'This is the content of card 2'
},
{
title: 'Card 3',
content: 'This is the content of card 3'
}
]
};
}
};
</script>
```
在这个示例中,我们将 `el-card` 封装成了一个名为 `MyCard` 的组件,在父组件中使用 `v-for` 循环渲染这个组件,并将 `cardList` 数组中的数据作为组件的属性传递给 `MyCard` 组件。
`MyCard` 组件的代码如下:
```html
<template>
<el-card :body-style="{ padding: '20px' }">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
</div>
<div>{{ content }}</div>
</el-card>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
},
content: {
type: String,
required: true
}
}
};
</script>
```
在 `MyCard` 组件中,我们接收了父组件传递过来的 `title` 和 `content` 属性,并将它们绑定到 `el-card` 组件上。
这样,在父组件中使用 `v-for` 循环渲染 `MyCard` 组件时,每个 `MyCard` 组件都会显示一个 `el-card`,并且根据传递进来的属性渲染出不同的内容。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)