vue组件如何实现任意css属性的动态设置
先看这个评论：他想封装一个组件
然后呢动态设置里边的背景颜色
那我这写了一个demo
我们简单来试一下啊
现在这是一个静态的颜色
大家看很简单就一个颜色
那首先
我们先把这个颜色提取成一个变量
我们在这
bgColor
我们换一个blue
然后呢把这换成这个变量
我们来试一下
大家看 蓝色了
然后接下来呢我们想既然他能写在这
他是不是也可以写在行内啊
我们试一下
style
好我们再换一个颜色
大家看 变了
那接下来我们验证一下
他这个样式变量 会不会串（影响其他元素）
我们再来一个不声明这个样式的
然后呢叫 bg2 test
然后下边呢我们再来一个bg
大家看！这个边量不会串
只会应用到第一个上面
所以没有问题
那我们是不是可以考虑
把这个style里面这一串
声明成一个计算属性呢
我们先来试一下啊把
这块改成一个declare
然后呢把它改成这个好
然后在下边我们先声明一个data
return这就叫bgColor
这是这个颜色变量
我们先是默认是红色吧
然后呢我们再写一个computed属性
declareBgColor
然后return一个字符串就好了
--bgColor
等于this.bgColor
好我们再来试一下
大家看！红色我们把它改一下
蓝色 blue
OK 没问题
我们再来试一下
把它绑定到一个input里面
然后呢 v-model
等于
bgColor
大家看 蓝色
红色
然后我们再改一个色号
好这样就可以了
最后更新于
这有帮助吗？