Vue绑定class样式和style样式

最新推荐文章于 2023-03-02 10:37:31 发布

ChuanYang Chen

最新推荐文章于 2023-03-02 10:37:31 发布

阅读量135

点赞数

文章标签： css vue.js html

本文链接：https://blog.csdn.net/weixin_45525653/article/details/120604609

版权

这篇博客介绍了如何在Vue.js中使用`:class`和`:style`指令动态地绑定CSS类和内联样式。示例展示了如何根据data属性改变元素的背景颜色和边框，并在点击事件中切换样式。`:class`用于切换预定义的class，`:style`则用于直接设置元素的样式属性，包括处理含有连字符的CSS属性。

摘要由CSDN通过智能技术生成

Vue绑定class样式和style样式

绑定class样式

:class里面包含的是表达式，可以获取到data里面定义的属性。

<style>
	div{
		width: 500px;
		height: 500px;
	}
	.default{
		border: chocolate 1px solid;
	}
	.blue{
		background-color: cornflowerblue;
	}
	.orange{
		background-color: orange;
	}
	</style>
  <body>
    <!-- 准备一个容器 -->
    <div id="root">
      <div class="default" :class="color" @click="changeColor"></div>
    </div>
    <script type="text/javascript">
      //创建Vue实例
      const vm = new Vue({
        el: "#root",
        data: {
          color : "blue"
        },
        methods: {
			changeColor(){
				this.color = "orange"
			}
		},
      });
    </script>
  </body>

绑定style样式

存在「-」的css属性，需要用驼峰命名的方式写入到data中

 <body>
    <!-- 准备一个容器 -->
    <div id="root">
      <div class="default" :style="divStyle"></div>
    </div>
    <script type="text/javascript">
      //创建Vue实例
      const vm = new Vue({
        el: "#root",
        data: {
			divStyle:{
				width:'500px',
				height:'500px',
				backgroundColor:'red'
			}
        }
      });
    </script>
  </body>