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

    绑定样式

        1.class样式

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

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

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

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

       2.style样式

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

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

    目录

    一、绑定class样式

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

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

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

    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>
    1.         data:{
    2.             name:'尚硅谷',
    3.             mood:'normal',
    4.             classArr:['sad','normal','happy'],
    5.             classObj:{
    6.                 atguigu1:false,
    7.                 atguigu2:false
    8.             }
    9.         },
    10.         methods: {
    11.             changeMood(){
    12.             
    13.             const arr=['sad','normal','happy']
    14.             // 现在只有0,1,2 这三个数
    15.             this.mood=arr[Math.floor(Math.random()*3)]
    16.             }
    17.         },
    18.  
    19.         })

    在右侧root中进行修改  

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.         <style>
    9.            .basic{
    10. 				width: 400px;
    11. 				height: 100px;
    12. 				border: 1px solid black;
    13. 			}
    14. 			
    15. 			.happy{
    16. 				border: 4px solid red;;
    17. 				background-color: rgba(255, 255, 0, 0.644);
    18. 				background: linear-gradient(30deg,yellow,pink,orange,yellow);
    19. 			}
    20. 			.sad{
    21. 				border: 4px dashed rgb(2, 197, 2);
    22. 				background-color: gray;
    23. 			}
    24. 			.normal{
    25. 				background-color: skyblue;
    26. 			}
    27.  
    28. 			.atguigu1{
    29. 				background-color: yellowgreen;
    30. 			}
    31. 			.atguigu2{
    32. 				font-size: 30px;
    33. 				text-shadow:2px 2px 10px red;
    34. 			}
    35. 			.atguigu3{
    36. 				border-radius: 20px;
    37. 			}
    38.         style>
    39.     head>
    40.     <body>
    41.         <div id="root">
    42.             
    43.            
    44.           
    45.            <div class="basic" :class="mood" @click="changeMood">{{name}}div>
    46.            <br>
    47.            <br>
    48.         
    49.         <div class="basic" :class="classArr">{{name}}div>
    50.  
    51.          
    52.          <div class="basic" :class="classObj">{{name}}div>
    53.  
    54.         div>
    55.           
    56.  
    57.        
    58.     body>
    59.     <script type="text/javascript">
    60.         //阻止vue在启动时生成生产提示
    61.         Vue.config.productionTip=false
    62.         
    63.         new Vue({
    64.         el:'#root',
    65.         data:{
    66.             name:'尚硅谷',
    67.             mood:'normal',
    68.             classArr:['sad','normal','happy'],
    69.             classObj:{
    70.                 atguigu1:false,
    71.                 atguigu2:false
    72.             }
    73.         },
    74.         methods: {
    75.             changeMood(){
    76.             
    77.             const arr=['sad','normal','happy']
    78.             // 现在只有0,1,2 这三个数
    79.             this.mood=arr[Math.floor(Math.random()*3)]
    80.             }
    81.         },
    82.  
    83.         })
    84.  
    85.  
    86.     script>   
    87. html>

    二、绑定style样式

            1.方法一直接绑定法

     <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}div>
    1.         data:{
    2.             fsize:40,
    3.             name:'尚硅谷',
    4.            }

            2.方法二对象法

    <div class="basic" :style="styleObj">{{name}}div>
    1.         data:{
    2.             styleObj:{
    3.                 // fontsize是css样式中真实存在的
    4.                 // 我们这个地方直接给一个值就好了
    5.                 fontSize:'40px'
    6.             },
    7.            
    8.             name:'尚硅谷',
    9.          }

  • 相关阅读:
    LeetCode每日一题：实现strStr()
    Linux系统调试篇——GDB调试入门
    图神经网络综述：模型与应用
    嵌入式开发：构建连接设备的5个技巧
    C# 12 中的新增功能
    STM32CubeMX环境安装（保姆级）
    20.项目开发之量化交易QuantTrade(二)
    Unity --- 文本输入框的使用
    EXPLIAN查询type
    Numpy学习笔记
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126624614