Vue样式绑定详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_59185329/article/details/126961618

vue中样式的使用

一、使用CSS样式
二、使用内联样式

一、使用CSS样式

1、数组
2、三木表达式
3、数组内置对象（对象的键是样式的名字，值是Boolean类型）
4、直接通过对象

<body>
  <div id="app">
    <header class="one">我是普通写法</header>
    <!-- 1、 -->
    <header :class="[one,'two']">我是数组写法</header>
    <!-- 2 -->
    <header :class="[one,flag?'two':'']">我是三木运算符</header>
    <!-- 3 -->
    <header :class="[one,{'two':true}]">我是数组内置对象</header>
    <!-- 4、对象{'类名':布尔类型} -->
    <header :class="{'one':true,'two':false}">我是对象</header>
  </div>
</body>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      one:"one",
      flag:true,
    },
    methods:{
     
    }
  })
</script>

二、使用内联样式

1、直接在行内样式，书写样式对象
2、将样式对象，定义到data中
3、通过数组引用多个样式对象
4、函数的调用

<body>
  <div id="app">
    <!-- 1、书写行内样式对象 -->
    <header :style="{color:'red','font-size':'20px'}">我是头部</header>
    <header :style="{'color':'red',fontSize:'20px'}">我是头部</header>
    <!-- 2、 将样式对象定义到data中-->
    <p :style="pStyle1">我是p标签</p>
    <!-- 3、通过数组引用多个样式 -->
    <p :style="[pStyle1,{fontWeight:'700'}]">我是数组样式</p>
    <!-- 4、函数的调用 -->
    <div :style="getStyle()"></div>
  </div>
</body>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      pStyle1:{color:'blue','font-size':'30px'},
    },
    methods:{
      getStyle(){
        return [{height:'200px','background-color':'red'}]
      }
    },
  })
</script>