Vue 4-样式绑定

最新推荐文章于 2025-03-06 18:43:00 发布

原创最新推荐文章于 2025-03-06 18:43:00 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用Vue.js实现元素样式的动态切换，通过@click事件和:class绑定来改变元素的样式，实现点击变色的效果。文章详细展示了如何利用Vue的数据绑定特性，结合条件判断和数组绑定，使页面元素在不同状态下显示不同的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
    .active{
        color:red;
    }
    .active2{
        color: blue;
    }
    </style>
</head>
<body>
    <!-- 通过class改变样式 -->
    <!-- :class="{active: isActived}" 叫class的对象绑定，.active取决于isActived的布尔值 -->
    <!-- :class="[cName]" 是class绑定数组中的变量，依赖变量的值 -->
    <div id="app">
        <div @click="changeColor"
             :class="[cName, cName2]" >
            点击变色
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                // isActived: false 
                cName: '',
                cName2: 'active2'
            },
            methods:{
                changeColor: function(){
                    // this.isActived = !this.isActived;
                    // this.cName = this.cName === 'active'? '' : 'active2';
                    if(this.cName === ''){
                        this.cName = 'active';                        
                        this.cName2 = '';                        
                    }else{
                        this.cName = '';
                        this.cName2 = 'active2'                        
                    }
                }
            }
        })
    </script>
</body>
</html>