vue中css如何使用data中的变量
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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;
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
vue history 模式打包部署在域名的二级目录的配置指南
这篇文章主要介绍了vue history 模式打包部署在域名的二级目录的配置指南 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现,下面这篇文章主要给大家介绍了关于vue2/vue3中provide/inject的基本用法的相关资料,需要的朋友可以参考下2023-04-04Vue项目从webpack3.x升级webpack4不完全指南
前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,需要的朋友可以参考下2019-04-04基于 vue-skeleton-webpack-plugin 的骨架屏实战
这篇文章主要介绍了基于 vue-skeleton-webpack-plugin 的骨架屏实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-08-08Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)
这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04适用于 Vue 的播放器组件Vue-Video-Player操作
这篇文章主要介绍了适用于 Vue 的播放器组件Vue-Video-Player操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论