当前位置 > it书童 > vue > 正文
推荐小册
java高效编程
怎样更高效地用 java 编程

juc并发工具库
java并发编程工具库

设计模式
设计模式

jvm调优
jvm调优

rabbitmq实战
rabbitmq实战

redis实战
redis实战

Keepavlied高可用集群
Keepavlied高可用集群

nginx入门到实战
nginx入门到实战

java调试
java调试中遇到的各种坑

java输入输出流
java输入输出流

vue 中的样式绑定

vue it书童 2020-01-07 17:45:23 0赞 0踩 969阅读 0评论

实现点击文字改变颜色,效果如下:

改变 class

<div id="app">
    <div class="container mt-5">
        <div :class="{'text-success': isActivated}" @click="handleDivClick">
            君不见,黄河之水天上来 奔流到海不复回
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActivated: false
        },
        methods: {
            handleDivClick: function () {
                this.isActivated = !this.isActivated
            }
        }
    })
</script>

:class="{'text-success': isActivated}" 表示,类名 text-success 是否显示取决于 isActivated 是否为 true

以上是 class 的对象绑定方式,还可以用数组绑定方式

<div id="app">
    <div class="container mt-5">
        <div :class="[activated]" @click="handleDivClick">
            君不见,黄河之水天上来 奔流到海不复回
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activated: ''
        },
        methods: {
            handleDivClick: function () {
                this.activated = this.activated === 'text-danger' ? '' : 'text-danger'
            }
        }
    })
</script>

既然是数组形式,就可以绑定多个类名,如:

<div :class="[activated, 'bg-info', 'p-2']" @click="handleDivClick">
    君不见,黄河之水天上来 奔流到海不复回
</div>

改变 style

对象绑定方式

<div id="app">
    <div class="container mt-5">
        <div :style="styleObj" @click="handleDivClick">
            君不见,黄河之水天上来 奔流到海不复回
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            styleObj: {
                color: 'red'
            }
        },
        methods: {
            handleDivClick: function () {
                this.styleObj.color = this.styleObj.color === 'red' ? '' : 'red'
            }
        }
    })
</script>

数组绑定方式,可以有多个对象

<div class="container mt-5">
    <div :style="[styleObj, {'font-size': '20px'}]" @click="handleDivClick">
        君不见,黄河之水天上来 奔流到海不复回
    </div>
</div>
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/376/style-binding-in-vue