Web前端开发之VUE08——动态class的优化、props验证

言行物恒

已于 2022-04-22 14:16:37 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Web前端开发——Vue 文章标签：前端 vue node.js

于 2022-04-15 20:35:40 首次发布

本文链接：https://blog.csdn.net/HAC_SOUL/article/details/124200879

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文探讨了如何在Vue中通过data对象动态管理class属性，解决长属性问题，并介绍如何结合使用类名和对象来控制样式。同时，关注了props验证在组件通信中的应用，确保组件间数据的有效传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态class的优化：

Class值与Class对象同时使用：

props验证：

动态class的优化：

在往期的class中我们会使用对象键值对直接输入在标签上，这样会使属性过长。

使用data的对象传入是一个不错的解决办法。

示例代码：

style操作过程中发现animation不能被编译，貌似是因为vue给class动态绑定了哈希，但是style动态没有绑定哈希导致的。

下面看一个示例：

<template>
  <div>
    <div class="text" :class="textAnimStyle">我是一段文字，我使用class</div>
    <button @click="animateToggle('rotate360')">旋转</button>
    <button @click="animateToggle('scaleIt')">放大</button>
    <div class="text" :style="textStyle">我是另一段文字，我使用style</div>

  </div>

</template>

<script>
export default {
  name: "MyApp",
  data() {
    return {
      textAnimStyle: {
        rotate360:false,
        scaleIt:false
      },
      textStyle:{
        'font-size':20+'px',
        //下面的代码不生效
        'animation':'rotate360 2s alternate infinite',
      }
    }
  },
  methods:{
    animateToggle(animateType){
      for (const ele in this.textAnimStyle) {
        this.textAnimStyle[ele]=false
      }
      for (const ele in this.textAnimStyle) {
        if (ele===animateType){
          this.textAnimStyle[ele]=true
        }
      }
    },
  }
}
</script>

<style scoped>
.text {
  display: inline-block;
  transform-origin: center;
}
.rotate360{
  animation: rotate360 2s alternate infinite;
}
.scaleIt{
  animation: scaleIt 2s alternate infinite;
}

@keyframes rotate360 {
  from {
  }
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes scaleIt {
  from {
  }
  to {
    transform: scale(1.5);
  }
}

</style>

Class值与Class对象同时使用：

:class="[navElemClass,{isSelected:item.isSelected}]"