Vue10-绑定样式

最新推荐文章于 2024-06-03 17:48:06 发布

MarxistVive

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量95

点赞数

分类专栏： Vue2笔记文章标签： vue.js javascript 前端绑定样式

本文链接：https://blog.csdn.net/A1066223647/article/details/125022766

版权

Vue2笔记专栏收录该内容

41 篇文章 1 订阅

订阅专栏

Vue10-绑定样式

文章目录

Vue10-绑定样式

1.class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。

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

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

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

2.style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>绑定样式</title>
      <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>
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>

      <!-- 准备好一个容器-->
      <div id="root">
         <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
         <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

         <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
         <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

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

         <!-- 绑定style样式--对象写法 -->
         <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
         <!-- 绑定style样式--数组写法 -->
         <div class="basic" :style="styleArr">{{name}}</div>
      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false
      
      const vm = new Vue({
         el:'#root',
         data:{
            name:'尚硅谷',
            mood:'normal',
            classArr:['atguigu1','atguigu2','atguigu3'],
            classObj:{
               atguigu1:false,
               atguigu2:false,
            },
            styleObj:{
               fontSize: '40px',
               color:'red',
            },
            styleObj2:{
               backgroundColor:'orange'
            },
            styleArr:[
               {
                  fontSize: '40px',
                  color:'blue',
               },
               {
                  backgroundColor:'gray'
               }
            ]
         },
         methods: {
            changeMood(){
               const arr = ['happy','sad','normal']
               const index = Math.floor(Math.random()*3)
               this.mood = arr[index]
            }
         },
      })
   </script>
   
</html>