绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）

绑定样式

1.class样式

写法：class=“xxx” xxx可以使字符串、对象、数组

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

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

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

2.style样式

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

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

4.最终代码案例：单击div实现变换心情（sad、normal、happy）

二、绑定style样式

1.方法一直接绑定法

2.方法二对象法

一、绑定class样式

1.绑定class样式--字符串写法

 <div class="basic" :class="mood" @click="changeMood">{{name}}div>

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

2.绑定class样式--数组写法

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

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

下面这个一下次用了三个样式

3. 绑定class样式--对象写法

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

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


        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)]
            }
        },
 
        })

在右侧root中进行修改

4.最终代码案例：单击div实现变换心情（sad、normal、happy）


html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <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">
            
           
          
           <div class="basic" :class="mood" @click="changeMood">{{name}}div>
           <br>
           <br>
        
        <div class="basic" :class="classArr">{{name}}div>
 
         
         <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样式

1.方法一直接绑定法

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


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

2.方法二对象法

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


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

相关阅读:
【C语言】.c源文件从编译到链接生成可.exe执行程序的过程
【论文阅读笔记】NITRE 2022 Challenge on Efficient Super-Resolution: Methods and Results
MindSpore报错what(): scoped_acquire::dec_ref(): thread state must be current!
js检索（捕获）字符串中的正则表达式的匹配exec的使用
【前端】CSS基础（4）
【shell学习】企业运维工作中常用的shell脚本
【网络知识必知必会】再谈Cookie和Session
检验检疫系统（LIS）源码：C# + MVC + SQLserver + Redis
LeetCode刷题（python版）——Topic58最后一个单词的长度
比UUID更快更安全NanoID到底是怎么实现的？（荣耀典藏版）

原文地址：https://blog.csdn.net/weixin_51351637/article/details/126624614

绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）

一、绑定class样式

1.绑定class样式--字符串写法

2.绑定class样式--数组写法

3. 绑定class样式--对象写法

4.最终代码 案例：单击div实现变换心情（sad、normal、happy）

二、绑定style样式

1.方法一直接绑定法

2.方法二对象法

4.最终代码案例：单击div实现变换心情（sad、normal、happy）