8.1 class 与 style 绑定

8.1.1 理解

  1. 在应用界面中, 某个(些)元素的样式是变化的

  2. class/style 绑定就是专门用来实现动态样式效果的技术

    8.1.2 class 绑定

  3. :class='xxx'，xxx 可以是字符串、数组、对象

  4. 表达式是字符串: 'classA'
  5. 表达式是对象: {classA:isA, classB: isB}，其中 isA 和 isB 是动态值
  6. 表达式是数组: ['classA', 'classB']，'classA', 'classB'是已定义好的样式对象

使用场景：

  • 字符串写法适用于：类名不确定，要动态获取。
  • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

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

    • image.pngimage.png

      代码演示

      ```html <!DOCTYPE html>

      {{name}}


      {{name}}


      {{name}}


  1. <a name="es72F"></a>
  2. ## 8.1.3 style 绑定
  3. `:style="{ color: activeColor, fontSize: fontSize + 'px' }"`，其中 `activeColor/fontSize `是 `data `属性。
  5. - `:style="{fontSize: xxx}"`其中`xxx`是动态值。
  6. - `:style="[a,b]"`其中`a、b`是样式对象。
  7. <a name="f5GLd"></a>
  8. ### 代码演示
  9. ```html
  10. <!DOCTYPE html>
  11. <html>
  12.     <head>
  13.         <meta charset="UTF-8" />
  14.         <title>绑定样式</title>
  15.         <style>
  16.             .basic{
  17.                 width: 400px;
  18.                 height: 100px;
  19.                 border: 1px solid black;
  20.             }
  22.             .happy{
  23.                 border: 4px solid red;;
  24.                 background-color: rgba(255, 255, 0, 0.644);
  25.                 background: linear-gradient(30deg,yellow,pink,orange,yellow);
  26.             }
  27.             .sad{
  28.                 border: 4px dashed rgb(2, 197, 2);
  29.                 background-color: gray;
  30.             }
  31.             .normal{
  32.                 background-color: skyblue;
  33.             }
  35.             .atguigu1{
  36.                 background-color: yellowgreen;
  37.             }
  38.             .atguigu2{
  39.                 font-size: 30px;
  40.                 text-shadow:2px 2px 10px red;
  41.             }
  42.             .atguigu3{
  43.                 border-radius: 20px;
  44.             }
  45.         </style>
  46.         <script type="text/javascript" src="../js/vue.js"></script>
  47.     </head>
  48.     <body>
  49.         <!-- 准备好一个容器-->
  50.         <div id="root">
  51.             <!-- 绑定style样式--对象写法 -->
  52.             <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
  53.             <!-- 绑定style样式--数组写法 -->
  54.             <div class="basic" :style="styleArr">{{name}}</div>
  55.         </div>
  56.     </body>
  58.     <script type="text/javascript">
  59.         Vue.config.productionTip = false
  61.         const vm = new Vue({
  62.             el:'#root',
  63.             data:{
  64.                 name:'尚硅谷',
  65.                 styleObj:{
  66.                     fontSize: '40px',
  67.                     color:'red',
  68.                 },
  69.                 styleObj2:{
  70.                     backgroundColor:'orange'
  71.                 },
  72.                 styleArr:[
  73.                     {
  74.                         fontSize: '40px',
  75.                         color:'blue',
  76.                     },
  77.                     {
  78.                         backgroundColor:'gray'
  79.                     }
  80.                 ]
  81.             }
  82.         })
  83.     </script>
  84. </html>

总而言之，所有需要动态变更的样式都要放到Vue属性里进行管理