vue怎样改变data里面的数据,vue data数据类型
本文主要介绍Vue如何使用CSS中数据定义的数据的相关信息。通过示例代码详细介绍，对大家学习或使用vue有一定的参考价值。有需要的朋友可以参考一下。
1.考虑一个问题。有一个来自后端的数据，比如某个百分比，需要显示在页面上。一般在CSS中会设置数据显示，但是如何在CSS中获取来自后端的数据呢？
2.使用自定义属性：data-
通过v-bind将后端数据绑定到自定义HTML属性，然后通过CSS的attr()函数获取属性。
模板
差异
div class=box
:data-content=obj.desc
:data-percent=obj.percent/div
/div
/模板
脚本
导出默认值{
data() {
返回{
目标
百分比：“30%”，
desc:‘哈哈哈哈哈哈哈’
}
}
},
}
/脚本
风格。方框{
宽度：400px
高度：200px
边框：1px固体三文鱼；
位置：相对；
}。框：之前，方框：在{
位置：绝对；
top:0；底部：0；
}。框：之前{
内容：attr(数据-内容)；
左：0；
右：calc(100% - attr(数据百分比))；
背景色：深蓝；
}。方框：在{
内容：attr(数据-内容)；
右：0；
左：attr(数据-百分比)；
背景色：深粉色；
}
/风格
最后一页显示
右边的计算部分无效，因为在calc()中不能使用attr()函数！我该怎么办？
3.自定义CSS变量
通过HTML的style属性将定义好的CSS变量以v-bind的形式绑定，然后在CSS中使用这个变量来达到效果。
模板
差异
div class=box
:style= { -percent :obj . percent }
:data-content=obj.desc
:data-percent=obj.percent/div
/div
/模板
风格。方框{
宽度：400px
高度：200px
边框：1px固体三文鱼；
位置：相对；
}。框：之前，方框：在{
位置：绝对；
top:0；底部：0；
}。框：之前{
内容：attr(数据-内容)；
左：0；
/* right: calc(100% - attr(数据百分比))；*/
右：calc(100% - var( -百分比))；
背景色：深蓝；
}。方框：在{
内容：attr(数据-内容)；
右：0；
/* left: attr(数据百分比)；*/
左：var( -百分比)；
背景色：深粉色；
}
/风格
上面的代码省略了脚本标签部分，因为这部分没有改变。
总结
这就是这篇关于Vue如何使用CSS中定义的数据的文章。关于Vue在CSS中使用数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。