动态切换class绑定style的三种写法

最新推荐文章于 2024-04-15 16:48:51 发布

讲讲讲讲讲

最新推荐文章于 2024-04-15 16:48:51 发布

阅读量2.7k

点赞数

分类专栏： vue 文章标签： vue：class动态绑定style

本文链接：https://blog.csdn.net/qq_44791408/article/details/98450125

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在vue官方文档里学到的，动态切换class绑定style的三种写法

	<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	    <style>
	    .demo1_a {
	       
	        background-color: black;
	    }
	    .demo1_b {
	       
	        background-color: pink;
	    }
	    .demo2_a {
	       
	        background-color: red;
	    }
	    .demo2_b {
	      
	        background-color: green;
	    }
	    .demo3_a {
	        background-color: blue;
	    }
	    .demo3_b {
	        background-color: yellow;
	    }
	    </style>
	</head>
	<body>
	    <!-- 动态切换class -->
	    <!-- 表示这个class是否存在取决于数据属性（isA/isB）的true -->
	
	    <!-- 写法一 -->
	    <div id="demo1">
	        <div 
	        class="static"
	        v-bind:class="{'demo1_a' : isA,'demo2_b' : isB}">demo1
	        </div>
	    </div>
	    <!-- 写法二 （不必内联定义在模块中）-->
	    <div id="demo2">
	        <div v-bind:class="classObject">demo2</div>
	    </div>
	    <!-- 写法三 （computed属性） -->
	    <div id="demo3">
	        <div v-bind:class="classObject">demo3</div>
	    </div>
	
	    <script>
	        var vm = new Vue({
	            el:'#demo1',
	            data:{
	                isA:false,
	                isB:true
	            }
	        })
	        var vm = new Vue({
	            el:'#demo2',
	            data:{
	                classObject: {
	                    'demo2_a':true,
	                    'demo2_b':false
	                }
	            }
	        })
	        var vm = new Vue({
	            el:'#demo3',
	            data() {//与上边data写法不同 可以替换
	                return {
	                    'isA':false,
	                    'isB':true
	                }
	            },
	            computed:{
	                classObject: function() {
	                    return {
	                        'demo3_a': this.isA,
	                        'demo3_b': this.isB
	                    }
	                }
	            }
	        })
	    </script>
	       
	    
	</body>
	
	</html>
```js

讲讲讲讲讲

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
动态切换class绑定style的三种写法

动态切换class绑定style的三种写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
复制链接

扫一扫