Vue.js 动态绑定CSS样式

vue.js 专栏收录该内容
29 篇文章 0 订阅

第一种方法:

v-bind:class="{a:b,c:b}"     a c 代表CSS样式表里相应的样式名       b 代表true(启用此样式)/false(不启用此样式)

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!">
    </div>

  css

.changeColor{
    background: brown;
    color: #ffffff;
}
.changeWidth{
    width: 200px;
}

   js

//实例化vue对象
new Vue({
    el:"#vue-app",
    data:{
        a:false
    },
    methods:{},
    computed:{}
});

效果图

点击按钮后

再次点击按钮后将恢复到初始样子

 

第二种方法

html

    <!--vue-app是根容器-->
    <div id="vue-app">
        <input type="button" v-on:click="a=!a" v-bind:class="change" value="change">
    </div>

css文件与上面一样
 

JS

//实例化vue对象
new Vue({
    el:"#vue-app",
    data:{
        a:false
    },
    methods:{},
    computed:{
        change:function(){
            return {
                changeColor:this.a,
                changeWidth:this.a
            }
        }
    }
});

效果图与上面一样

 

如果您有什么不明白的地方其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验调色设定,欢迎交流,哈哈哈哈哈

 

 

  • 4
    点赞
  • 2
    评论
  • 18
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值