VUE框架使用字符串的形式实现对class的绑定效果达到动态css样式------VUE框架

旧约Alatus

已于 2023-11-29 22:18:55 修改

阅读量438

点赞数 8

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript ecmascript 前端框架 vue js

于 2023-11-29 11:21:50 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134685662

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .static
        {
            border: 1px solid black;
            background-color: aquamarine;
        }
        .big
        {
            width: 200px;
            height: 200px;
        }
        .small
        {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        
        <div class="static small">{{msg}}</div>
        <br><br>
        <button @click="changeBig">变大</button>
        <button @click="changeSmall">变小</button>
        
        <div class="static" v-bind:class="c">{{msg}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                c : "big"
            },
            methods : {
                changeBig()
                {
                    this.c = "big";
                },
                changeSmall()
                {
                    this.c = "small";
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

<style>

.static

{

border: 1px solid black;

background-color: aquamarine;

}

.big

{

width: 200px;

height: 200px;

}

.small

{

width: 100px;

height: 100px;

}

</style>

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>



<div class="static small">{{msg}}</div>

<br><br>

<button @click="changeBig">变大</button>

<button @click="changeSmall">变小</button>



<div class="static" v-bind:class="c">{{msg}}</div>

</div>

<script>

const vm = new Vue({

el : "#app",

data : {

msg : "Hello",

c : "big"

},

methods : {

changeBig()

{

this.c = "big";

},

changeSmall()

{

this.c = "small";

}

}

});

</script>

</body>

</html>