vue(vue.js) —style样式
原文链接：vue(vue.js) —style样式 – 每天进步一点点 (longkui.site)
上一篇文章中简单介绍了vue中style的用法，这篇文章介绍以下vue中style的用法
我们可以直接像下面这样写style
<div style="width: 50px; background-color:red" @click="changeCss">我是div</div>
像这种style样式把css都写死了， 如果想要动态改变style样式应该怎么办呢？
1.style的对象写法
我们也是用 :style这种形式，它接受的是一个对象。
那么可以参考下面的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- div -->
<div :style="styleObj" @click="changeCss">我是div</div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
testClass:'class3',
styleObj:{
fontSize:'50px'
}
},
methods:{
//改变样式的方法
changeCss(){
this.testClass='class4'
}
}
})
</script>
</body>
</html>注意这个对象：styleObj的书写形式，里面的font-size写成了fontSize(驼峰命名)的形式。其他style的写法也要参考这种写法。
2.style的数组写法
style不知可以接收一个对象，还可以接收一个数组，比如下面这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- div -->
<div :style="[styleObj,styleObj2]" @click="changeCss">我是div</div>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data:{
testClass:'class3',
styleObj:{
fontSize:'50px'
},
styleObj2:{
backgroundColor:'red'
}
},
methods:{
//改变样式的方法
changeCss(){
this.testClass='class4'
}
}
})
</script>
</body>
</html>可以看出 style接收了一个数组，数组里面是不同的对象，然后共同作用。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具