Vue动态绑定样式

最新推荐文章于 2024-06-19 21:36:07 发布

IT_CODE.

最新推荐文章于 2024-06-19 21:36:07 发布

阅读量5.5k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_54250695/article/details/122158910

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

对于vue.js动态绑定class样式，看了一些网上的帖子发现整理的都不太完整，特地好好整理了一下，由于都在学习中，有啥疑问、问题欢迎指正，一起来学习吧。

由于3种Vue动态绑定样式测试所需要的css代码都是重复的，我们就把他提炼出来

css代码：

	.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}

第一种情况: 适用于样式的类名不确定，需要动态的指定

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
     <script src="js/vue.js"></script>
     <style>
         
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
     </style>
</head>
<body>
    <div id="root">
                     
  <div class="basic " :class="mood" @click="changeMood">{{name}}</div>
  <!-- :class为v-bind简写形式 mood但表达式用    vue就会介入解析-->
    </div>
    
    <script>
             new Vue({
               el:'#root',
               data:{
               name:'尚硅谷',
               mood:'normal'
               },
              methods:{
              changeMood(){
                this.mood ='happy'; 
              }

             }

         
         })


    </script>
</body>
</html>

1.可以发现我们并没有去操作dom,只是把Vue维护的数据mood改了，Vue帮我操作了这里的流程

2.正常的样式正常写，绑定的样式，变化的样式绑定的形式写(v-bind)

3.效果图

点击该div盒子变化

4.第一种写法也叫字符串写法(你所填写的样式要变也是换个'happy','sad'之类的字符串)

第二种情况: 绑定样式_数组写法,适用于绑定的样式，个数都不确定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script src="js/vue.js"></script>
     <style>
         
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
     </style>
</head>
<body>
    <div id="root">
                      
      <!--第二种写法  数组写法      适用于绑定的样式个数不确定，名字也不确定-->

      <div class="basic" :class="Array" @click="">{{name}}</div><br/><br/>


    </div>
     <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name:"尚硅谷",
                mood:'normal',
                Array: ['atguigu2','atguigu1','atguigu3'],       //第二种数组写法(样式的名字与个数都不确定)
            
            },
          
        })
    </script>
</body>
</html>

1.效果图:(加上的边框，文字阴影等样式)

2.可以发现第二种数组写法，动态绑定样式数组里面可以很方便的添加多个样式，所以样式的数量和类名都不确定,因为类名也是很方便的可以以数组元素的形式加进数组当中完成样式的动态绑定。

第三中情况:对象写法(绑定样式的类名与数量都确定，但是否决定挂载运用)

<!DOCTYPE html>
<html lang="en">
<head>

     <script src="js/vue.js"></script>
     <style>
         
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
     </style>
</head>
<body>
    <div id="root">
                      
  

      
      <!--  绑定样式  对象写法-->
      
      <div class="basic" :class="classObj" @click="">{{name}}</div><br/><br/>

 <!-- <div class="basic" :class="{atguigu1:true,atguigu3:true}" @click="">{{name}}</div><br/><br/> -->
                                                       <!--直接对象放这里   不能动态切换了-->

    </div>
     <script>
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name:"尚硅谷",
                mood:'normal',
                classObj:{
                  atguigu1:true,
                  atguigu2:true,
                  atguigu3:true,
                  sad:true
                }
            
            },
          
        })
    </script>
</body>
</html>

1.效果图:

2.以对象的形式动态绑定样式:

new Vue({

el:'#root',

data:{

name:"尚硅谷",

mood:'normal',

classObj:{

atguigu1:true,

atguigu2:true,

atguigu3:true,

sad:true

}

})

3.这样我们可以很方便的更改data中classObj对象中属性的布尔值，是否动态的绑定class样式

true即为动态绑定该样式,false即为没有动态绑定该样式

通过以上学习我们可以基本掌握vue.js的动态绑定了吧

IT_CODE.

关注

2
点赞
踩
2

收藏

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

对于vue.js动态绑定class样式，看了一些网上的帖子发现整理的都不太完整，特地好好整理了一下，由于都在学习中，有啥疑问、问题欢迎指正，一起来学习吧。第一种情况: 适用于样式的类名不确定，需要动态的指定代码如下:<!DOCTYPE html><html lang="en"><head> <title>Document</title> <script src="js/vue.js"&gt
复制链接

扫一扫

专栏目录