vue 通过动态绑定class，改变样式

￡神魔★判官ぃ 2022-05-13 15:20 206阅读 0赞

根据输入框或者下拉选择框有没有值，改变按钮可不可用，及按钮颜色

<el-select v-model="selectData.id" placeholder="请选择">
        <el-option label="请选择" value=""></el-option>
             <el-option
                  v-for="item in allData"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id">
        </el-option>
    </el-select>
    <el-button  size="mini" icon="iconfont icon-tianjia" 
        :disabled='isAddBtnDisabled'
        v-bind:class="addButtonStyle"
        >  添加
    /el-button>
    
    <script>
        data () {
            return {
    	    allData:{
    		{id:''},
    		{id:''}
    	    },
    	    selectData:{
    	    	id:''
    	    },
    	    isAddBtnDisabled:false, //按钮是否可用
    	    
            }
        },
        methods: {
            
        },
        //计算属性
        computed:{
    	addButtonStyle(){
    	    if(this.selectData.id != ''){
                    this.isAddBtnDisabled = false;
                    return 'addButtonAvailable';
                }else{
                    this.isAddBtnDisabled = true;
                    return 'addButtonUnAvailable';
                }
    	}
        }
    </script>
    
    <style scoped lang="less">
        .addButtonAvailable {
            background-color: orange;
             color: #FFFFFF;
        }
        .addButtonUnAvailable {
            background-color: #7B7B7B;
            color: #FFFFFF;
        }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 动态样式绑定

1. 简介本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

迈不过友情╰/ 2024年03月27日 08:47/ 0 赞/ 30 阅读

相关 Vue 动态绑定CSS样式

动态绑定CSS样式绑定了changeColor样式,changeC是判断条件，根据条件changeC控制css加与不加 <div v-bind:class="

悠悠/ 2022年11月19日 04:24/ 0 赞/ 220 阅读

相关 Vue动态绑定Class 与 Style

Class 可以通过对象语法和数组语法进行动态绑定 <div v-bind:class="{ active: isActive, 'text-danger': has

悠悠/ 2022年05月21日 01:26/ 0 赞/ 204 阅读

相关 vue 通过动态绑定class，改变样式

根据输入框或者下拉选择框有没有值，改变按钮可不可用，及按钮颜色 <el-select v-model="selectData.id" placeholder="请选择

￡神魔★判官ぃ/ 2022年05月13日 15:20/ 0 赞/ 207 阅读

相关 vue10-class数组样式绑定

首先看代码 <!DOCTYPE html> <html lang=en> <head> <meta charset="utf

「爱情、让人受尽委屈。」/ 2022年05月10日 00:10/ 0 赞/ 95 阅读

相关 vue09-class对象样式绑定

首先看代码 <!DOCTYPE html> <html lang=en> <head> <meta charset="utf

淩亂°似流年/ 2022年05月10日 00:10/ 0 赞/ 108 阅读

相关【vue系列】class动态绑定

> 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串

Bertha 。/ 2021年12月22日 07:43/ 0 赞/ 305 阅读

相关 vue class、style样式绑定

class对象方式绑定 <div id="app"> <div @click="handleDivClick" :class="{act

Love The Way You Lie/ 2021年11月02日 09:02/ 0 赞/ 426 阅读

相关 vue动态样式绑定改变伪元素等特殊样式(css var函数)

改变样式是我们实际开发中最常做的事情。诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。

淡淡的烟草味﹌/ 2021年08月13日 12:09/ 0 赞/ 594 阅读

相关 vue动态绑定class

<li v-for="(item,index) in processOptions" class="process-list-item" :class="{ ' is-

╰+哭是因爲堅強的太久メ/ 2021年07月25日 20:53/ 0 赞/ 423 阅读