5.Vue - 绑定class样式、style样式

绑定样式1.class样式写法：class=“xxx”xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法：适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}”其中xxx是动态值：style="[a,b]"其中ab是样式对象，如下。..

我爱布朗熊

6702人浏览 · 2022-08-31 22:07:45

我爱布朗熊 · 2022-08-31 22:07:45 发布

一、绑定class样式

在应用界面中，某些（个）元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术

准备一部分样式，在选用的时候happy、sad、normal这三个样式要三选一

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

绑定样式

class样式

写法 :class=“xxx” (带冒号) xxx可以使字符串、对象、数组

字符串法：适用于类名不确定，要动态获取

对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用

数组法：适用于要绑定多个样式，个数确定，名字确定，但不确定用不用

1.1 字符串写法

使用于样式的类名不确定，需要动态指定

 <!-- ":"冒号是v-bind单向绑定的简写形式 -->
<!-- 正常的样式我们写在"class"中即可，变化的样式我们写在":class" --> 
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

  new Vue({
        el: '#root',
        data: {
            name: '济南',
            mood:"normal"
        },
        methods: {
            changeMood() {
               const arr =['happy',"normal","sad"]
               this.mood=arr[Math.floor(Math.random()*3)]
            }
        }
  }

单击之后，下面这个框会随意变动

1.2 数组写法

适用于绑定的样式个数不确定，名字也不确定

<div class="basic" :class="classArr">{{name}}</div>

    new Vue({
        el: '#root',
        data: {
            name: '济南',
            mood:"normal",
            classArr:['atguigu1','atguigu2','atguigu3'],
        }
    })

之后点击页面便会随机展示

1.3 对象写法

适用于绑定的样式个数确定，名字也确定，但要动态决定用不用

<div class="basic" :class="classObj">{{name}}</div>

        data:{
            name:'尚硅谷',
            mood:'normal',
            classArr:['sad','normal','happy'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            }
        }

在右侧root中进行修改

1.4 单击div实现变换心情

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" 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">
            <!-- 需求：点击之后变换样式，前提是basic样式不变，仅变后面的样式 -->
           <!-- <div class="basic normal" @click="changgeMode">{{name}}</div>  如果我们要完成上面的需求的话，我们这里不能这么写 -->
          <!-- :class="mood" vue解析这一块 -->
           <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
           <br>
           <br>
        <!--绑定class样式--数组写法，适用于绑定的样式个数不确定，名字也不确定  -->
        <div class="basic" :class="classArr">{{name}}</div>

         <!--绑定class样式--对象写法，适用于绑定的样式个数确定，名字也确定，但要动态决定用不用  -->
         <div class="basic" :class="classObj">{{name}}</div>

        </div>
          

       
    </body>
    <script type="text/javascript">
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip=false
        
        new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            mood:'normal',
            classArr:['sad','normal','happy'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            }
        },
        methods: {
            changeMood(){
            
            const arr=['sad','normal','happy']
            // 现在只有0,1,2 这三个数
            this.mood=arr[Math.floor(Math.random()*3)]
            }
        },

        })


    </script>   
</html>

二、绑定style样式

style样式

:style=“{fontSize:xxx}” 其中xxx是动态值

:style="[a,b]" 其中ab是样式对象，如下

2.1 直接绑定法

fontSize:fsize 这种其实是一个key与value的格式

 <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>

        data:{
            fsize:40,
            name:'尚硅谷',
           }

2.2 对象法

<div class="basic" :style="styleObj">{{name}}</div>

        data:{
            styleObj:{
                // fontsize是css样式中真实存在的
                // 我们这个地方直接给一个值就好了
                fontSize:'40px',
                color: 'red'
            },
           
            name:'尚硅谷',
         }

2.3 数组法

<div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div>

    data:{
        styleObj1:{
            fontSize:'40px',
            color: 'red'    
        },
        styleObj2:{
            color: 'red',
            backgroundColor: 'orange'
        }
        name:'尚硅谷',
     }

或者是下面这个样子

<div class="basic" :style="styleArr">{{name}}</div>

    data:{
        styleArr:[
           styleObj1:{
               fontSize:'40px',
               color: 'red'    
           }, 
            styleObj2:{
               color: 'red',
               backgroundColor: 'orange'
           }
        ]
        name:'尚硅谷',
     }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...