v-bind:cl
as
s在v-for中动态绑定需要对每个按钮的cl
as
s进行计算属性处理,以确保能够正确赋值。具体操作步骤如下:
在Vue实例中定义一个计算属性,用于返回需要绑定的cl
as
s值。
在v-for循环中的el-button标签上,使用v-bind指令将计算属性和cl
as
s绑定在一起。
<template>
<el-button v-for="(item, index) in list" :key="index" :class="getClass(item)">{{item.text}}</el-button>
</template>
<script>
export default {
data() {
return {
list: [
{text: '按钮1', type: 'primary'},
{text: '按钮2', type: 'success'},
{text: '按钮3', type: 'danger'}
computed: {
getClass(item) {
// 定义计算属性,返回需要绑定的class值
if (item.type === 'primary') {
return 'btn-primary'
} else if (item.type === 'success') {
return 'btn-success'
} else if (item.type === 'danger') {
return 'btn-danger'
</script>
这样,就可以根据数据源中的type属性动态修改按钮样式了。