vue样式绑定

最新推荐文章于 2024-06-30 10:00:38 发布

风雨等归期

最新推荐文章于 2024-06-30 10:00:38 发布

阅读量104

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/liangmaxmin/article/details/105101936

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <style>
        .active {
            color: red;
        }
    </style>
    <body>
        <div id="app">
            <div @click="handleDivClick" :class="{'active':isactive}">Hello world</div>
            <div @click="handleDiv" :class="{active}">Hello world</div>
            <div @click="handle" :style="styleObj">Hello world</div>
            <div :style="[styleObj,{fontSize:'20px'}]">Hello world</div>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    isactive: false,
                    active: '',
                    styleObj: {
                        color: "black"
                    }
                },
                methods: {
                    handleDivClick: function() {
                        this.isactive = !this.isactive;
                    },
                    handleDiv() {
                        if (this.active === "") {
                            this.active = 'active';
                        } else {
                            this.active = "";
                        }
                    },
                    handle() {
                        this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
                    }
                }
            })
        </script>
    </body>
</html>

风雨等归期

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue样式绑定

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head>...
复制链接

扫一扫

专栏目录