Vue超简单的动态绑定样式

最新推荐文章于 2024-03-17 12:22:11 发布

栈狮

最新推荐文章于 2024-03-17 12:22:11 发布

阅读量117

点赞数

分类专栏：网页笔记学习文章标签： vue js javascript

本文链接：https://blog.csdn.net/yy6818/article/details/117856326

版权

笔记同时被 3 个专栏收录

47 篇文章 0 订阅

订阅专栏

学习

47 篇文章 0 订阅

订阅专栏

网页

22 篇文章 0 订阅

订阅专栏

:class=" 这里面可以是数组形式和对象形式 "

如图

效果

代码如下

<template>
  <div>
      <div :class="[index === 1 ?'box':'',{'color': index === 1}]">
        <p :class="{'font':true}">改变的字体色彩</p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'stest',
  data () {
    return {
      index:1
    }
  },
  computed: {},
  methods: {

    },
}
</script>

<style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  .color{
    font-size: 2em;
  }
  .font{
    color: blue;
  }
</style>