vue 绑定 class 样式类和 style 内联样式

最新推荐文章于 2024-09-11 11:57:35 发布

liun_n

最新推荐文章于 2024-09-11 11:57:35 发布

阅读量334

点赞数 1

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_39706777/article/details/121550350

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<template>
<div>
    <!-- v-bind:class 绑定字符串  -->
    <button :class="colorClass" >22</button>  
    <!-- v-bind:class 绑定对象 -->
    <button @click="say()" :class="{'red':isRed,'bold':isBold}">111</button>
    <!-- 数组形式绑定多个class -->
    <button :class="[colorClass,baseClass]" >33</button>
    <!-- 数组结合三目运算符绑定class -->
    <button :class="[true?colorClass:baseClass]" >33</button>
    <!-- 绑定单个style对象 -->
    <button :style="styleObject" >33</button>
    <!-- 绑定多个style对象 -->
    <button :style="[styleObject,baseStyleObject]" >33</button>
</div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      colorClass:'red',
      baseClass:'base',
      isRed:true,
      isBold:true,
      styleObject:{
        color:'blue'
      },
      baseStyleObject:{
        width:"50px",
        height:"30px"
      }
    }
  }
}
</script>

<style>
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.bold{
  font-weight: bold;
}
.base{
  width: 100px;
}
</style>