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

1、考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢?

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

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

<template>
  <div>
    <div class="box"
    :data-content="obj.desc"
    :data-percent="obj.percent"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        obj: {
          percent: '30%',
          desc: '哈哈哈哈哈哈'
        }
      }
    },
  }
</script>

<style>
.box {
  width: 400px;
  height: 200px;
  border: 1px solid salmon;
  position: relative;
}
.box::before, .box::after {
  position: absolute;
  top: 0; bottom: 0;
}
.box::before {
  content: attr(data-content);
  left: 0;
  right: calc(100% - attr(data-percent));
  background-color: deepskyblue;
}
.box::after {
  content: attr(data-content);
  right: 0;
  left: attr(data-percent);
  background-color: deeppink;
}
</style>

最后页面展示

计算 right 部分失效了, 原因是 attr() 函数不能在 calc() 中使用! 怎么办呢?

3、自定义 CSS 变量

通过在 HTML 的 style 属性以 v-bind 的形式绑定定义的 CSS 变量, 继而在 CSS 中使用该变量达到效果

<template>
  <div>
    <div class="box"
    :style="{'--percent': obj.percent}"
    :data-content="obj.desc"
    :data-percent="obj.percent"></div>
  </div>
</template>
<style>
  .box {
    width: 400px;
    height: 200px;
    border: 1px solid salmon;
    position: relative;
  }
  .box::before, .box::after {
    position: absolute;
    top: 0; bottom: 0;
  }
  .box::before {
    content: attr(data-content);
    left: 0;
    /* right: calc(100% - attr(data-percent)); */
    right: calc(100% - var(--percent));
    background-color: deepskyblue;
  }
  .box::after {
    content: attr(data-content);
    right: 0;
    /* left: attr(data-percent); */
    left: var(--percent);
    background-color: deeppink;
  }
  </style>

上面的代码省略了 <script> 标签部分, 因为这部分没有改动

总结

到此这篇关于Vue如何在CSS中使用data定义的数据的文章就介绍到这了,更多相关Vue在CSS使用data的数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    总结一下我遇到的一个纠结很久的问题. 在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报错: 原因: 在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined. 解决方案: 一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性 二)使用箭头函数 补充:解决 vue

  • vue 需求 data中的数据之间的调用操作

    我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 原理是什么?忘记了 知道了可以评论说下 所以 我们可以这样写 在mounted中直接赋值就可以了! 不知道你们有么有遇到过这种情况 反正我是遇到了两次了 第一次忘记怎么处理的了 ...... over 希望

  • vue获取data数据改变前后的值方法

    场景:购物车增加商品数量同时更新bridge标志上的总商品个数,如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误.因此要减去变化前的数量才能得到添加的数量. 方法一: 直接watch监听data的数据 watch: { a (now,old) { console.log(now,old) } } old为旧的值now为更新后的值 方法二:自定义指令 通过自定义指令将更新前的值绑定到对应自定义指令的元素的dataset上然后在vue文件里面通过ref获取到元素来获取旧的

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

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

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

    1.考虑一个问题, 后端传来一个数据, 比如是某个百分比, 需要在页面做进度展示. 一般的情况都会在 CSS 中设置数据展示, 但是 CSS 中如何获取到后端传来的数据呢? 2.使用自定义属性: data- 通过 v-bind 将后端的数据绑定在自定义 HTML 属性上, 然后通过 CSS 的 attr() 函数获取该属性 <template> <div> <div class="box" :data-content="obj.desc"

  • 如何在CSS中绘制曲线图形及展示动画

    如何在CSS中绘制曲线图形及展示动画

    理解 box-shadow 首先,回顾一下box-shadow这个属性.基本属性用法就是给元素创造一层阴影. 再简单提一下,本文会用到的关于阴影的第一个技巧: 使用阴影复制图像/投影图像 当 box-shadow 的第三.第四个参数模糊半径和扩张半径都为 0 的时候,我们可以得到一个和元素大小一样的阴影: div { width: 80px; height: 80px; border: 1px solid #333; box-sizing: border-box; box-shadow: 80p

  • vue 如何删除数组中的某一条数据

    目录 删除数组中的某一条数据 删除普通数组 删除数组对象 使用splice()删除数组中的一个数据 删除数组中的某一条数据 删除普通数组 let arr = [1,2,3,4,5]; //方法一 let index = arr.indexOf('3'); arr.splice(index, 1) //打印结果 [1,2,4,5] //方法二 let index = arr .findIndex(item => {             if (item == '3') {          

  • 实现vuex与组件data之间的数据同步更新方式

    问题 我们都知道,在Vue组件中,data部分的数据与视图之间是可以同步更新的,假如我们更新了data中的数据,那么视图上的数据就会被同步更新,这就是Vue所谓的数据驱动视图思想. 当我们使用Vuex时,我们也可以通过在视图上通过 $store.state.[DataKey] 来获取Vuex中 state 的数据,且当 state 中的数据发生变化时,视图上的数据也是可以同步更新的,这似乎看起来很顺利. 但是当我们想要通过将 state 中的数据绑定到Vue组件的 data 上,然后再在视图上去

  • vue如何在data中引入图片的正确路径

    目录 在data中引入图片正确路径 1.通过import引入路径才行 2.通过require更方便 3.在ui上直接动态也要通过require vue引入图片路径问题 方法一 方法二 在data中引入图片正确路径 今天踩的坑给分享出来. 本来想要在横版遍历图片出来在vue中自己做轮播,结果发现在data中直接引入路径是渲染不出来的. 原因是webpack打包无法解析 1.通过import引入路径才行 如果直接在模板上通过src="../../assets/images/top5.png"

  • Vue组件中的data必须是一个function的原因浅析

    组件可以有自己的data,并且data必须是一个function. 在下面这个例子中,data 返回了一个在外部定义的对象.并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • 如何在vue-cli中使用css-loader实现css module

    [前言] 无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化. 例子: <div> <div class="demo"> <div class="child"></ div> </div> </div> <script> // some code <

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • vue项目中form data形式传参方式

    vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

随机推荐