vue中css如何使用data中的变量
更新时间：2024年03月24日 14:28:03 作者：console.log( )
这篇文章主要介绍了vue中css如何使用data中的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue css使用data中的变量
封装一个ui组件，组件的样式一般是多种多样的
我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的
(vue3中已经可以直接获取，可以去学习一下) 通过vars
那么在vue2中，我们要借助setProperty函数
写一个简单的例子
<template>
<div class="home" ref="UI">
<div class="header">hello world</div>
</div>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
},
mounted(){
this.setUI()
},
methods:{
setUI(){
this.$refs.UI.style.setProperty("--color",this.color);//给变量赋值
}
}
}
</script>
<style>
.home{
.header{
color: var(--color); //使用变量
}
}
</style>看到另一种写法
要简单一点，不需要借助setProperty函数
<template>
<div class="home" :style="myStyle">
<div class="header">hello world</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
data () {
return {
color: 'red'
}
},
computed: {
myStyle () :object{
return {
"--color": this.color,
}
}
},
})
</script>
<style>
.home{
.header{
color: var(--color); //使用变量
}
}
</style>vue中data变量使用的注意事项
因为在Vue中，data中的属性往往都是用于双向绑定，所以Vue会对其有劫持，所以我们在对data属性进行操作时，尽量不要对其直接操作
比如下面代码：
export default {
data() {
return {
list: []
}
},
methods: {
init() {
for(let i = 0; i < 1000; i++) {
this.list.push({
key: i,
name: '张三'
});
}
console.log(this.list);
}
},
created() {
this.init();
}
}
最终打印结果如下：
可以看到包含一个Observer属性，这是Vue自动加上的。
上面代码不断向this.list中添加数据，这样会造成过度数据劫持，造成逻辑处理速度极慢（取值同样如此），可能我们在平时的代码上感受不到，如果将一个比较复杂的canvas渲染动画放进去，全部使用this属性就会发现canvas渲染非常卡顿。
所以我们将init中代码改成：
const list = [];
for(let i = 0; i < 1000; i++) {
list.push({
key: i,
name: '张三'
});
}
this.list = list;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
elementUI使用el-upload上传文件写法及避坑总结(上传图片/视频到本地/服务器及回显+删除)
upload上传是前端开发很常用的一个功能,下面这篇文章主要给大家介绍了关于elementUI使用el-upload上传文件写法及避坑的相关资料,包括上传图片/视频到本地/服务器及回显+删除,需要的朋友可以参考下2023-03-03
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
这篇文章主要介绍了VUE.js 中取得后台原生HTML字符串 原样显示问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
vue3中$attrs的变化与inheritAttrs的使用详解
$attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了，vue2中$listeners是单独存在的，在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性，这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下2022-10-10
本篇文章主要介绍了详解vue组件通信的三种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了vue图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了vue如何解决echarts5.0以上版本插入地图的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了使用VUE实现一键复制内容功能,功能就是当我们点击复制按钮时，会提示“复制成功”，这样复制的内容就可以在其他地方使用了，感兴趣的朋友可以学习一下2023-04-04
这篇文章主要介绍了Vue中全局常用的过滤方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论