实现在html文件中，通过一下方式给元素添加style属性
<h3 :style="fn">新的一天，打工仔加油</h3>
1、定义好一个样式库(函数字典)
2、window全局注册一个函数(高阶函数),该函数的参数为cb（回调函数1）和val（参数2,给cb使用）
3、在cb回调函数中,进行相关处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 :style="fn">新的一天，打工仔加油</h3>
<script>
// 获取:style绑定的值，对应就是methods对象中的key
let h3Dom = document.querySelector('h3')
let val = h3Dom.getAttribute(':style') // fn
/**
* 定义函数字典，每一个函数的返回值，都是可以使用的样式
* */
const methods = {
fn: () => {
let conf = {
background: 'pink',
width: '100px',
color: 'white',
border: '1px solid red'
}
return conf
},
fn1: () => {
let conf = {
background: 'chocolate',
width: '100px',
color: 'white'
}
return conf
},
fn2: () => {
let conf = {
background: 'gray',
width: '100px',
color: 'white'
}
return conf
},
}
/**
* window全局，注册一个函数(高阶函数)
* */
window.musted = (ac, val) => { ac(val) }
/**
* 高阶函数调用,并在回调函数中处理
* */
musted((val) => {
// 遍历对比查找
for (const fnName in methods) {
if (val === fnName) {
let targetFn = methods[fnName] // fn1(){}
let styleObj = targetFn()
// 动态给标签元素，添加样式
for (const key in styleObj) {
h3Dom.style[key] = styleObj[key]
}
}
}
}, val)
</script>
</body>
</html>
做个记录，如有不妥，欢迎指正。
不要忽视你达成的每个小目标，它是你前进路上的垫脚石。冲！
标签：style,Vue,仿写,val,methods,let,conf,函数 From： https://blog.csdn.net/qq_54548545/article/details/139726386