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

￡神魔★判官ぃ 2022-05-13 15:20 262阅读 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 条评论，262人围观）

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

相关阅读

相关 Vue框架学习笔记——绑定class样式和绑定style样式

文章目录前文提要 class样式的三种绑定方法（图片来自参考链接） style样式（内联形式）总结 --------------------

灰太狼/ 2024年02月17日 11:19/ 0 赞/ 48 阅读

相关 vue-绑定class样式

1、数组语法我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="active

喜欢ヅ旅行/ 2023年07月23日 09:56/ 0 赞/ 44 阅读

相关 Vue 动态绑定CSS样式

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

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

相关 Vue动态绑定Class 与 Style

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

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

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

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

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

相关 vue10-class数组样式绑定

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

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

相关 vue09-class对象样式绑定

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

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

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

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

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

相关 vue class、style样式绑定

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

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

相关 vue动态绑定class

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

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