Vue 如何在CSS中使用data定义的数据

pgslun

已于 2022-09-15 16:19:49 修改

阅读量4.2k

点赞数

文章标签： css javascript 前端

于 2022-09-15 16:14:07 首次发布

本文链接：https://blog.csdn.net/qq_44993023/article/details/126873295

版权

此时虽然是vue3 ，vue2也是一样的

1、使用自定义属性: data-

通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性

<template>
  <div class="home">
    <div class="top">
      <NavBar @click.native="aa"></NavBar>
    </div>
    <div class="content">
      
      <div class="box" @click="bbb" v-if="navName">
        <div ref="subtitle" 
        :data-tiem="tiem" 
        :style="{'--tiem': tiem}"
        data-typed-text="瞌睡的博客主页">{{title}}</div>
      </div>

      <div style="height: 300px;border: 1px solid red;">
        <router-view v-slot="{ Component }">
          <transition name="component-fade">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>
<!--  -->
<script setup>
import { NavBar } from '@layout/index.js'
import { ref, reactive, nextTick, watch, provide } from "vue";
let subtitle = ref(null)
let title = ref('瞌睡的博客主页')
let tiem = ref()
const aa = async function name(params) {
  title.value = '瞌睡的博客主页瞌睡的博客主页瞌睡的博客主页瞌睡的博客主页'
  tiem.value = Number(title.value.length)
   await subtitle.value.classList.remove('up')
   setTimeout(() => {
    subtitle.value.classList.add('up')
   }, 300);

}
const navName = ref()
const sendGrandson = function (value) { 
  navName.value = value 
}
provide('sendHandle', sendGrandson)
 
</script>

<style lang="scss" scoped >
.home {
  height: 800px;
  display: flex;
  flex-direction: column;
  background: url("../../assets/img/01.jpg") no-repeat;
  .content {
    height: 100%;
    flex: 1;
  }
  .box {
    display: inline-block;
    div {
      width: 0;
      margin-left: .25rem;
      overflow: hidden;
      border-right: .125rem solid #000;
      white-space: nowrap;
      font-size: 1.6rem;
    }
  }
}

.up {
  animation:
    typing calc(0.25s * var(--tiem )) steps( var(--tiem) , end) forwards,
    blink 1s infinite;
}
@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes blink {
  from {
    border-color: transparent
  }
  to {
    border-color: #000;
  }
}
</style>