答案如下：原因是通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。
例如改变背景色：
<div id="changeColor">使用JS改变背景色</div><script>
var cc = document.getElementById("changeColor")
cc.style.backgoundColor="#000" //将背景色改为黑色
cc.style.fontSize="20px" // 将文字大小改为20px，等号右边也可以写为20+"px"
cc.style.color="#fff" //将文字颜色改为白色
</script>
以此类推即可
javascript和css的区别：
css为网页表现、JS为网页行为。
css对网页进行静态修饰，可以使页面以一定的布局方式显示出来。
css是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式；它主要用于美化HTML页面。
而js对页面的各种动态效果进行处理，可用来实现网页和人交互的功能，如进行图片的替换，图片的滚动，层的显示与隐藏，快捷键的处理等等。
扩展资料：
CSS（Cascading Style Sheet）层叠样式表单
表现（presentation）——设计网页的表现样式，即“如何显示有关内容”。
CSS是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式；它主要用于美化HTML页面。
语法为：selector {property：value} (选择符 {属性：值})。
通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式；如修改颜色、字体、字号、宽高、位置、背景等
JS（JavaScript）一种动态脚本语言
行为（behavior）——控制网页的行为（效果），即“内容应该如何对事件做出反应”。
使用JavaScript代码可以让前台变的有交互(点击事件)，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
