Vue使用样式和内联样式

注意：

1.Vue中使用样式，必须用v-on（缩写成:）绑定

2.在Js中，对象（无序键值对）的类名单引号可以省略，但是属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号，属性名（键值）必须使用单引号隔开。所以都用单引号不会出错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <style>
        .color{
            color:cornflowerblue;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
            /*意大利斜塔*/
        }
        .active{
            letter-spacing: 0.5em;
            /*设置中文字符串间距，英文的可用word-spacing*/
        }
    </style>
</head>
<body>
      <div id="app">
          <h3 class="color italic">陈小帅真的是有点帅的啊</h3>
          <!--HTML的使用方式-->

          <h3 :class="['color','thin']">陈小帅真的是有点帅的啊</h3>
          <!--vue的使用方式，传递一个数组，一定要用单引号隔开。同时需要使用v-on绑定-->

          <h3 :class="['color','thin',flag?'active':'']">陈小帅真的是有点帅的啊</h3>
          <!--vue第二种使用方式，数组中使用三元表达式-->

          <h3 :class="['color','thin',{'active':flag}]">陈小帅真的是有点帅的啊</h3>
          <!--vue第三种使用方式，数组中使用对象替代三元表达式，通过键名作为判断的依据-->

          <h3 :class="{'active':false,'color':flag,'italic':!flag}">陈小帅真的是有点帅的啊</h3>
          <!--vue第四种用法，直接使用对象，v-on指令绑定的属性是类名，可以带引号也可省略，通过一个键作为标识符-->
      </div>
      
      <!--以上是在Vue中使用样式-->
      
      <div id="app2">
          <h3 :style="{color:'lightblue','font-weight':200}">陈小帅是真的长得有点帅的啊</h3>
          <!--这里的对象都是无序键值对的集合，如果属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号-->
          <!--通过style直接书写样式-->

          <h3 :style="styleObj">陈小帅是真的长得有点帅的啊</h3>
          <!--将对象放入data中，然后定义-->

          <h3 :style="[styleObj1,styleObj2]">陈小帅是真的长得有点帅的啊</h3>
          <!--多个data对象-->
          
          <!--以上内联样式-->
      </div>
      
      <script>
          var vm = new Vue({
             el:'#app',
             data:{
                 flag:true
             }, 
             methods:{}
          });

          var vm2 = new Vue({
              el:'#app2',
              data:{
                  styleObj1:{color:'lightblue','font-weight':200},
                  styleObj2:{'font-style': 'italic'}
              },
              methods:{}
          });
      </script>
</body>
</html>

效果：

Vue使用样式和内联样式

注意：

猜你喜欢