[js高手之路] vue系列教程 - 绑定class与行间样式style(6)

最新推荐文章于 2024-06-15 23:06:52 发布

weixin_33909059

最新推荐文章于 2024-06-15 23:06:52 发布

阅读量116

点赞数

文章标签： javascript json ViewUI

本文介绍Vue.js中如何通过不同方式绑定class和style属性，包括数组、对象及布尔值控制等方法，实现动态样式更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、绑定class属性的方式

1、通过数组的方式，为元素绑定多个class

 1 <style>
 2     .red {
 3         color:red;
 4         /*color:#ff8800;*/
 5     }
 6     .bg {
 7         background: #000;
 8         /*background: green;*/
 9     }
10     </style>
11 
12 
13     window.onload = function(){
14         var c = new Vue({
15             el : '#box',
16             data : {
17                 red_color : 'red',
18                 bg_color : 'bg'
19             }
20         });
21     }
22 
23 
24 
25     <div id="box">
26         <span :class="[red_color,bg_color]">this is a test string</span>
27     </div>

上例为span 绑定2个class,通过设定red_color和bg_color的值，找到对应的class类名

2、通过控制class的true或者false，来使用对应的class类名, true: 使用该class, false: 不使用该class

 1     <style>
 2     .red {
 3         color:red;
 4     }
 5     .bg {
 6         background: #000;
 7     }
 8     </style>
 9 
10     window.onload = function(){
11         var c = new Vue({
12             el : '#box',
13             data : {
14             }
15         });
16     }
17     
18     <div id="box">
19         <span :class="{red:true,bg:true}">this is a test         string</span>
20     </div>
21

3、这种方式，跟第二种差不多，只不过是把class的状态true/false用变量来代替

 1     <style>
 2     .red {
 3         color:red;
 4     }
 5     .bg {
 6         background: #000;
 7     }
 8     </style>
 9 
10     window.onload = function(){
11         var c = new Vue({
12             el : '#box',
13             data : {
14                 r : true,
15                 b : false
16             }
17         });
18     }
19 
20     <div id="box">
21         <span :class="{red:r,bg:b}">this is a test string</span>
22     </div>

4、为class属性绑定整个json对象

 1     <style>
 2     .red {
 3         color:red;
 4     }
 5     .bg {
 6         background: #000;
 7     }
 8     </style>
 9 
10     window.onload = function(){
11         var c = new Vue({
12             el : '#box',
13             data : {
14                 json : {
15                     red : true,
16                     bg : false
17                 }
18             }
19         });
20     }
21 
22 
23     <div id="box">
24         <span :class="json">this is a test string</span>
25     </div>

二、绑定style行间样式的多种方式

1、使用json格式，直接在行间写

1     window.onload = function(){
2         var c = new Vue({
3             el : '#box',
4         });
5     }
6 
7      <div id="box">
8         <span :style="{color:'red',background:'#000'}">this is a test string</span>
9     </div>

2、把data中的对象，作为数组的某一项，绑定到style

 1     window.onload = function(){
 2         var c = new Vue({
 3             el : '#box',
 4             data : {
 5                 c : {
 6                     color : 'green'
 7                 }
 8             }
 9         });
10     }
11 
12     <div id="box">
13         <span :style="[c]">this is a test string</span>
14     </div>

3、跟上面的方式差不多，只不过是为数组设置了多个对象

 1     window.onload = function(){
 2         var c = new Vue({
 3             el : '#box',
 4             data : {
 5                 c : {
 6                     color : 'green'
 7                 },
 8                 b : {
 9                     background : '#ff8800'
10                 }
11             }
12         });
13     }

1     <div id="box">
2         <span :style="[c,b]">this is a test string</span>
3     </div>

4、直接把data中的某个对象，绑定到style

 1     window.onload = function(){
 2         var c = new Vue({
 3             el : '#box',
 4             data : {
 5                 a : {
 6                     color:'yellow',
 7                     background : '#000'
 8                 }
 9             }
10         });
11     }

1     <div id="box">
2         <span :style="a">this is a test string</span>
3     </div>