原文链接：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/[email protected]/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/[email protected]/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接收了一个数组，数组里面是不同的对象，然后共同作用。
标签：style,vue,样式,testClass,js,fontSize,写法 From： https://www.cnblogs.com/longkui-site/p/18464917