【vue2基础】Class 与 Style 绑定

小魔女千千鱼

已于 2023-06-09 11:08:48 修改

阅读量197

点赞数 2

分类专栏：前端文章标签： javascript vue.js 前端

于 2023-03-08 11:47:05 首次发布

本文链接：https://blog.csdn.net/DecorateCC/article/details/129400327

版权

前端专栏收录该内容

23 篇文章 7 订阅

订阅专栏

<template>
  <div id="app">
    <!-- <div v-bind:class="{ active: isActive }"></div>对象语法.传给v-bind:class一个对象，以动态的切换class,
    上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。 -->
    <!--可以把数组传给v-bind:class,以应用一个class列表，
    想根据条件切换列表中的class，可以用三元表达式 -->
    <div
      :class="[isActive ? 'active' : '',isGreen ? 'green':'']"
      class="test"
      style="width:200px;text-align:center;line-height:200px">
      hi vue
    </div>
    <div
      :style="{color : color , fontSize:size,background:isRed?'#ff0000':''}">
      happy
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo1',
  data: function() {
    return {
      isActive: true,
      isGreen: true,
      color: '#ffffff',
      size: '50px',
      isRed: true
    }
  },
  mounted() {
    this.test()
  },
  methods: {
  }
}
</script>

<style scoped>
.test{font-size:30px; color: blue;}
.green{color: #0f0;}
.active{background: #fff000;}
</style>