Vue 4-样式绑定

最新推荐文章于 2024-04-17 18:04:33 发布

Sukie_

最新推荐文章于 2024-04-17 18:04:33 发布

阅读量182

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Lin16819/article/details/100936284

版权

Vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!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>